依据昨天我们设置的首页导航条，今天我们继续完成More模块的内容。

• 导航条：

MoreNav.gif

• 示例代码：

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

export default class HJMore extends Component {
    render() {
        return (
            <View style={styles.container}>
                {this.renderNavBar()}
            </View>
        );
    }

    renderNavBar() {

        return(
            <View style={styles.NavBatstyle}>
                <Text style={styles.TitleStyle}>更多</Text>
                <TouchableOpacity style={styles.settingPositionStyle} onPress={()=>{alert('设置按钮被点击')}}>
                    <Image source={{uri:'icon_mine_setting'}} style={styles.ImagesIconStyle}/>
                </TouchableOpacity>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },

    NavBatstyle: {
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1)',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'

    },

    TitleStyle: {
        color:'white',
        fontSize:20,
    },

    settingPositionStyle: {

        position:'absolute',
        right:10,
        bottom:15,
    },

    ImagesIconStyle: {

        width:Platform.OS === 'ios' ? 28 : 24,
        height:Platform.OS === 'ios' ? 28 : 24,
    },
});

module.exports = HJMore;

• Cell的定义：

  • 运行效果：

Cells.gif

• 示例代码

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

export default class MoreCell extends Component {

    static defaultProps = {

        title:'',       //标题
        isSwitch:false,   //展示开关
        Righttitle:'',  //右侧标题
    }
    // 构造
    constructor(props) {
      super(props);
      this.state = {

          isOn:false,  //默认开关状态
      };
    }

    render() {
        return (
            <TouchableOpacity onPress={()=>alert('cell被点击了!')}>
                <View style={styles.CellStyles}>
                   {/*左侧标题*/}
                   <Text>{this.props.title}</Text>
                   {/*右侧显示内容*/}
                    {this.renderRighTtContent()}
                </View>
             </TouchableOpacity>
        );
    }

    // 右侧显示图片或开关
    renderRighTtContent() {

            if(this.props.isSwitch) {
                return(
                    <Switch value={this.state.isOn == true} onValueChange={()=>{this.setState({isOn:!this.state.isOn})}}
                            onTintColor='rgba(255,96,0,1)'
                    />
                )
            }else {
                return(
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        {this.renderRightTitle()}
                        <Image source={{uri:'icon_cell_rightArrow'}} style={styles.rightIconStyle}/>
                     </View>
                    )
            }


    }

    // 右侧标题
    renderRightTitle() {

        if (this.props.Righttitle.length > 0){
            return(
                <Text style={{color:'gray',marginRight:8}}>{this.props.Righttitle}</Text>
            )
        }

    }
}

const styles = StyleSheet.create({

    CellStyles: {

        height:Platform === 'ios' ? 40 : 30,
        backgroundColor:'white',
        borderBottomColor:'#ddd',
        borderBottomWidth:0.5,

        //主轴对齐方式
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',

        paddingLeft:10,
        paddingRight:10,

    },

    rightIconStyle: {
        width:8,
        height:16,
    },

});

module.exports = MoreCell;

在'More'界面中调用：在cell 创建的方式可以使用for循环，但现在只是简单的完成一下。

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

// 引入cell组件
var Cell = require('./MoreCell');

export default class HJMore extends Component {
    render() {
        return (
            <View style={styles.container}>
                {this.renderNavBar()}
            <ScrollView>
                <View style={{marginTop:20}}>
                    <Cell
                        title="扫一扫"
                    />
                </View>
                <View style={{marginTop:20}}>
                    <Cell
                        title="省流量模式"
                        isSwitch={true}
                    />
                    <Cell
                        title="扫一扫"
                    />
                    <Cell
                        title="扫一扫"
                    />
                    <Cell
                        title="扫一扫"
                    />
                    <Cell
                        title="清空缓存"
                        Righttitle="1.99M"
                    />
                </View>
                <View style={{marginTop:20}}>
                    <Cell
                        title="扫一扫"
                    />
                    <Cell
                        title="扫一扫"
                    />
                    <Cell
                        title="扫一扫"
                    />
                </View>
             </ScrollView>

            </View>
        );
    }

    renderNavBar() {

        return(
            <View style={styles.NavBatstyle}>
                <Text style={styles.TitleStyle}>更多</Text>
                <TouchableOpacity style={styles.settingPositionStyle} onPress={()=>{alert('设置按钮被点击')}}>
                    <Image source={{uri:'icon_mine_setting'}} style={styles.ImagesIconStyle}/>
                </TouchableOpacity>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#E8E8E8',
    },

    NavBatstyle: {
        height:Platform.OS === 'ios' ? 64 : 44,
        backgroundColor:'rgba(255,96,0,1)',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'

    },

    TitleStyle: {
        color:'white',
        fontSize:20,
    },

    settingPositionStyle: {

        position:'absolute',
        right:10,
        bottom:15,
    },

    ImagesIconStyle: {

        width:Platform.OS === 'ios' ? 28 : 24,
        height:Platform.OS === 'ios' ? 28 : 24,
    },
});

module.exports = HJMore;

• Demo下载

  • 运行项目

    • a）打开终端，输入：cd 项目根目录 进到项目目录
    • b）输入：npm install，下载node_modules
    • c）运行在iOS设备：react-native run-ios
    • d）运行在Android设备：react-native run-android