學(xué)習(xí)小碼哥react-native視頻教程，以下粘貼出源碼哭靖，方便以后學(xué)習(xí)使用。附上效果圖，在ios中這類列表界面一般選擇使用TableView來實現(xiàn)竹观，在RN中選擇<ScrollView>更簡單些循捺，每個Section則使用<View>包裹起來擂涛。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ScrollView,
} from 'react-native';

var CommonCell = require('./XMGCommonCell');

var More = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        { /*導(dǎo)航條*/ }
        {this.renderNavBar()}

      <ScrollView>
        <View style={{marginTop:20}}>
          <CommonCell
            title='掃一掃'
          />
        </View>
        <View style={{marginTop:20}}>
          <CommonCell
            title='省流量模式'
            isSwitch={true}
          />
          <CommonCell
            title='消息提醒'
          />
          <CommonCell
            title='邀請好友'
          />
          <CommonCell
            title='清除緩存'
            rightTitle='1.99M'
          />
        </View>
        <View style={{marginTop:20}}>
          <CommonCell
            title='意見反饋'
          />
          <CommonCell
            title='問卷調(diào)查'
          />
          <CommonCell
            title='支付幫助'
          />
          <CommonCell
            title='網(wǎng)絡(luò)診斷'
          />
          <CommonCell
            title='關(guān)于react-native'
          />
          <CommonCell
            title='精品應(yīng)用'
          />
        </View>
      </ScrollView>
      </View>
    );
  },

  // 導(dǎo)航條
  renderNavBar(){
    return(
      <View style={styles.navOutViewStyle}>
        <Text style={{color:'white', fontSize:16, fontWeight:'bold', marginTop:18}}>更多</Text>
        <TouchableOpacity onPress={()=>{alert('點擊')}} style={styles.rightViewStyle}>
          <Image source={require('./../Source/slide_feedback.png')} style={styles.navImagStyle} />
        </TouchableOpacity>
      </View>
    )
  }


});

var styles = StyleSheet.create({
  navImagStyle: {
    width: 23,
    height: 23,
  },
  rightViewStyle: {
    //絕對定位
    position: 'absolute',
    right: 10,
    bottom: 13
  },
  navOutViewStyle: {
    height: 64,
    backgroundColor: '#1fb5ec',
    // 設(shè)置主軸方向
    flexDirection: 'row',
    // 垂直居中丢氢，設(shè)置側(cè)軸的對其方式
    alignItems: 'center',
    // 設(shè)置主軸放心居中
    justifyContent: 'center'
  },
  container: {
    flex: 1,
    backgroundColor: '#e8e8e8',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = More;

Cell組件源碼如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Switch
} from 'react-native';

var CommonCell = React.createClass({
  getDefaultProps(){
    return{
      title:'', //標題
      isSwitch: false, //是否展示開關(guān)
      rightTitle:''
    }
  },
  getInitialState(){
    return{
      isOn:false
    }
  },

  render() {
    return (
      <TouchableOpacity>
        <View style={styles.container}>
          { /*左邊*/ }
          <Text style={{marginLeft:8}}>{this.props.title}</Text>
          { /*右邊*/ }
          {this.renderRightView()}
        </View>
    </TouchableOpacity>
    );
  },
// cell右邊顯示的內(nèi)容
renderRightView(){
  // 判斷
  if (this.props.isSwitch) {
    return(
      <Switch value={this.state.isOn == true} onValueChange={()=>{this.setState({isOn:!this.state.isOn})}} style={{marginRight:8}} />
    )
  }else {
    return(
      <View style={{flexDirection:'row',alignItems:'center'}}>
        {this.rightTitle()}
        <Image  source={require('./../Source/common_arrow_right.png')} style={{width:8,height:13,marginRight:8}} />
      </View>
    )
  }
},
rightTitle(){
  if (this.props.rightTitle.length > 0) {
    return(
      <Text style={{color:'gray'}}>{this.props.rightTitle}</Text>
    )
  }
}

});

var styles = StyleSheet.create({
  container: {
    height:40,
    backgroundColor: 'white',
    borderBottomColor: '#dddddd',
    borderBottomWidth: 0.5,
    flexDirection: 'row',
    //設(shè)置主軸的對其方式
    justifyContent:'space-between',
    //垂直居中
    alignItems: 'center'
  }
});

module.exports = CommonCell;

頁面效果圖：

更多.png