RN笔记-列表

学习小码哥react-native视频教程，以下粘贴出源码，方便以后学习使用。附上效果图，在ios中这类列表界面一般选择使用TableView来实现，在RN中选择更简单些，每个Section则使用包裹起来。

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 (
      
        { /*导航条*/ }
        {this.renderNavBar()}

      
        
          
        
        
          
          
          
          
        
        
          
          
          
          
          
          
        
      
      
    );
  },

  // 导航条
  renderNavBar(){
    return(
      
        更多
        {alert('点击')}} style={styles.rightViewStyle}>
          
        
      
    )
  }


});

var styles = StyleSheet.create({
  navImagStyle: {
    width: 23,
    height: 23,
  },
  rightViewStyle: {
    //绝对定位
    position: 'absolute',
    right: 10,
    bottom: 13
  },
  navOutViewStyle: {
    height: 64,
    backgroundColor: '#1fb5ec',
    // 设置主轴方向
    flexDirection: 'row',
    // 垂直居中，设置侧轴的对其方式
    alignItems: 'center',
    // 设置主轴放心居中
    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, //是否展示开关
      rightTitle:''
    }
  },
  getInitialState(){
    return{
      isOn:false
    }
  },

  render() {
    return (
      
        
          { /*左边*/ }
          {this.props.title}
          { /*右边*/ }
          {this.renderRightView()}
        
    
    );
  },
// cell右边显示的内容
renderRightView(){
  // 判断
  if (this.props.isSwitch) {
    return(
      {this.setState({isOn:!this.state.isOn})}} style={{marginRight:8}} />
    )
  }else {
    return(
      
        {this.rightTitle()}
        
      
    )
  }
},
rightTitle(){
  if (this.props.rightTitle.length > 0) {
    return(
      {this.props.rightTitle}
    )
  }
}

});

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

module.exports = CommonCell;

页面效果图：

更多.png