陈桥驿站 陈桥驿站

ReactNative SettingsList

--> React Native 阅读 ( 245 ) 文章转载请注明来源!

前言

模仿iOS系统设置的页面。

下面是iPadiPhone系统设置的页面,对比一下O(∩_∩)O~。

使用

install react-native-settings-list

MacBookPro:MySettingList www.tomcat7.cn$ npm install react-native-settings-list
npm WARN rm not removing /Users/mac/MySettingList/node_modules/.bin/sane as it wasn't installed by /Users/mac/MySettingList/node_modules/sane
npm WARN rm not removing /Users/mac/MySettingList/node_modules/.bin/uuid as it wasn't installed by /Users/mac/MySettingList/node_modules/uuid
npm WARN rm not removing /Users/mac/MySettingList/node_modules/.bin/json5 as it wasn't installed by /Users/mac/MySettingList/node_modules/json5
npm WARN rm not removing /Users/mac/MySettingList/node_modules/.bin/jsesc as it wasn't installed by /Users/mac/MySettingList/node_modules/jsesc
npm WARN rm not removing /Users/mac/MySettingList/node_modules/.bin/jest as it wasn't installed by /Users/mac/MySettingList/node_modules/jest-cli
npm WARN rm not removing /Users/mac/MySettingList/node_modules/.bin/esvalidate as it wasn't installed by /Users/mac/MySettingList/node_modules/esprima
npm WARN rm not removing /Users/mac/MySettingList/node_modules/.bin/esparse as it wasn't installed by /Users/mac/MySettingList/node_modules/esprima

> fsevents@1.2.7 install /Users/mac/MySettingList/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download 
[fsevents] Success: "/Users/mac/MySettingList/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN eslint-plugin-react-native@3.6.0 requires a peer of eslint@^3.17.0 || ^4 || ^5 but none is installed. You must install peer dependencies yourself.

+ react-native-settings-list@1.8.0
added 50 packages from 16 contributors, removed 55 packages, updated 866 packages and audited 85743 packages in 77.75s
found 2 vulnerabilities (1 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

import

import SettingsList from 'react-native-settings-list';

Demo

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Dimensions,
  Text,
  Image
} from 'react-native';
import SettingsList from 'react-native-settings-list';


/*
// simple example
class SettingsListExample extends Component {
  constructor(){
    super();
    this.onValueChange = this.onValueChange.bind(this);
    this.state = {switchValue: false, stages: 20};
  }
  render() {
    return (
      <View style={{backgroundColor:'gray',flex:1}}>
        <View style={{flex:1, marginTop:50}}>
          <SettingsList>
          <SettingsList.Header headerText='First Grouping' headerStyle={{color:'white'}}/>
            <SettingsList.Item
              icon={
                <View style={{height:30,marginLeft:10,alignSelf:'center'}}>
                  <Image style={{alignSelf:'center',height:30, width:30}} source={require('./images/about.png')}/>
                </View>
              }
              itemWidth={50}
              title='Icon Example'
              onPress={() => Alert.alert('Icon Example Pressed')}
            />
            <SettingsList.Item
              hasNavArrow={false}
              switchState={this.state.switchValue}
              switchOnValueChange={this.onValueChange}
              hasSwitch={true}
              title='Switch Example'/>
            <SettingsList.Item
              title='Different Colors Example'
              backgroundColor='#D1D1D1'
              titleStyle={{color:'blue'}}
              arrowStyle={{color:'blue'}}
              onPress={() => Alert.alert('Different Colors Example Pressed')}/>
            <SettingsList.Header headerText='Different Grouping' headerStyle={{color:'white', marginTop:50}}/>
            <SettingsList.Item titleInfo='Some Information' hasNavArrow={false} title='Information Example'/>
            <SettingsList.Item title='Settings 1'/>
            <SettingsList.Item title='Settings 2'/>
            <SettingsList.Item
              id="stages"
              title='stages'
              isEditable={true}
              value={this.state.stages.toString()}
              onTextChange={(text) => this.setState({stages: text})} 
            />
          </SettingsList>
        </View>
      </View>
    );
  }
  onValueChange(value){
    this.setState({switchValue: value});
  }
}
*/

/**
 * realistic iPhone example
 */
export default class SettingsListExample extends Component {
  constructor(){
    super();
    this.onValueChange = this.onValueChange.bind(this);
    this.state = {switchValue: false, loggedIn: false};
  }
  render() {
    var bgColor = '#DCE3F4';
    return (
      <View style={{backgroundColor:'#EFEFF4',flex:1}}>
        <View style={{borderBottomWidth:1, backgroundColor:'#f7f7f8',borderColor:'#c8c7cc'}}>
          <Text style={{alignSelf:'center',marginTop:30,marginBottom:10,fontWeight:'bold',fontSize:16}}>Settings</Text>
        </View>
        <View style={{backgroundColor:'#EFEFF4',flex:1}}>
          <SettingsList borderColor='#c8c7cc' defaultItemSize={50}>
            <SettingsList.Header headerStyle={{marginTop:15}}/>
            {this.state.toggleAuthView ?
              <SettingsList.Item
                icon={
                    <Image style={styles.imageStyle} source={require('./images/user.png')}/>
                }
                title='Logged In As...'
                hasNavArrow={false}
              />
              :
              <SettingsList.Item
                icon={
                    <Image style={styles.imageStyle} source={require('./images/user.png')}/>
                }
                isAuth={true}
                authPropsUser={{placeholder:'E-mail'}}
                authPropsPW={{placeholder:'Password'}}
                onPress={() => this.toggleAuthView()}
              />
            }
            <SettingsList.Header headerStyle={{marginTop:15}}/>
            <SettingsList.Item
              icon={
                  <Image style={styles.imageStyle} source={require('./images/airplane.png')}/>
              }
              hasSwitch={true}
              switchState={this.state.switchValue}
              switchOnValueChange={this.onValueChange}
              hasNavArrow={false}
              title='Airplane Mode'
            />
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/wifi.png')}/>}
              title='Wi-Fi'
              titleInfo='Bill Wi The Science Fi'
              titleInfoStyle={styles.titleInfoStyle}
              onPress={() => Alert.alert('Route to Wifi Page')}
            />
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/blutooth.png')}/>}
              title='Blutooth'
              titleInfo='Off'
              titleInfoStyle={styles.titleInfoStyle}
              onPress={() => Alert.alert('Route to Blutooth Page')}
            />
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/cellular.png')}/>}
              title='Cellular'
              onPress={() => Alert.alert('Route To Cellular Page')}
            />
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/hotspot.png')}/>}
              title='Personal Hotspot'
              titleInfo='Off'
              titleInfoStyle={styles.titleInfoStyle}
              onPress={() => Alert.alert('Route To Hotspot Page')}
            />
            <SettingsList.Header headerStyle={{marginTop:15}}/>
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/notifications.png')}/>}
              title='Notifications'
              onPress={() => Alert.alert('Route To Notifications Page')}
            />
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/control.png')}/>}
              title='Control Center'
              onPress={() => Alert.alert('Route To Control Center Page')}
            />
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/dnd.png')}/>}
              title='Do Not Disturb'
              onPress={() => Alert.alert('Route To Do Not Disturb Page')}
            />
            <SettingsList.Header headerStyle={{marginTop:15}}/>
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/general.png')}/>}
              title='General'
              onPress={() => Alert.alert('Route To General Page')}
            />
            <SettingsList.Item
              icon={<Image style={styles.imageStyle} source={require('./images/display.png')}/>}
              title='Display & Brightness'
              onPress={() => Alert.alert('Route To Display Page')}
            />
          </SettingsList>
        </View>
      </View>
    );
  }
  toggleAuthView() {
    this.setState({toggleAuthView: !this.state.toggleAuthView});
  }
  onValueChange(value){
    this.setState({switchValue: value});
  }
}

const styles = StyleSheet.create({
 imageStyle:{
   marginLeft:15,
   alignSelf:'center',
   height:30,
   width:30
 },
 titleInfoStyle:{
   fontSize:16,
   color: '#8e8e93'
 }
});

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:http://www.cctv3.net/archives/rnSettingsList.html (转载时请注明本文出处及文章链接)

React Native
发表新评论
雷姆
拉姆