【React Native 实战：构建电商 App】07-个人中心设置及 Debug 日志

知识点：

• 改造顶部组件
• 添加个人中心页
• 添加设置页和日志页

这一篇内容我们写一个简单的个人界面，由于接口不能用，这里就使用假的接口去做数据请求。

设置 header

旧的 header 默认有一个返回按钮，但是在个人中心是不需要的，我们要做一个兼容处理，将左侧的按钮隐藏掉，同时还添加了两处自定义样式的地方。

接下来在个人中心页把这个组件引入并且设置好标题、右侧的齿轮等。

整体是放入到一个滚动组件中的，这样在刷新的时候也会把顶部的组件拉下来。

伪造请求结果

到目前为止，我们还没有接入登录、注册等服务，所以先写一个假的结果返回。

在 src 目录下创建一个 service 目录，该目录用来放一些 App 用到的服务，在目录下创建 data.js，这个文件就是全局数据存储的地方了，先写一个伪造的固定返回值。

/**
 * 获取缓存的用户信息(伪)
 */
exports.UserInfo = {
    couponCount: "0",
    desc: "欢迎光临小店",
    followInviteCode: "1089690",
    headImgUrl: "http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLlez8OiaMX5pEgPJI7fiaGoeD1OIM2Trldk2j2Ye6tT24QxbNmVLIuO7IibG0XedibpojaHiaLicibbJLYQ/132",
    inviteCode: "1093558",
    monthSales: "0.00",
    name: "疯狂紫萧",
    openTuanYn: "Y",
    recruitIcon: "",
    salesIcon: "",
    shopImgUrl: "http://img.cdn.daling.com/zin/2018/01/03/FA163E0BD2F9I13G03NHS8FO64U.jpg",
    stunnerTotalAmount: "399",
    todayAmount: "0.00",
    todayOrderCount: "0",
    unionid: "o0RMh0_ygoyT2hNKZFWqBCoKJXCo",
    userRole: "1"
}

后面会将这部分数据做成全局的，一旦其他的地方有变动了就会更新引用的页面，这里先使用一个固定的数据，后面会继续讲解到。

完成界面开发

剩下的就是按照设计把功能慢慢做出来。

一个简单的个人信息展示：

{/*个人简略信息组件*/}
            <TouchableWithoutFeedback>
                <View style={styles.head}>
                    <Image
                        style={styles.headImg}
                        source={{ uri: UserInfo.headImgUrl }} />
                    <View style={{ flex: 1, flexDirection: 'row' }}>
                        <Text allowFontScaling={false} style={styles.headerName}>
                            {UserInfo.name}
                        </Text>
                    </View>
                    <Image
                        style={styles.headArrow}
                        source={{ uri: require('../images/icon-arrow-red') }} />
                </View>
            </TouchableWithoutFeedback>

三个横排的快捷入口：

{/*3个快捷通道*/}
            <View style={styles.link}>
                <TouchableOpacity activeOpacity={0.9} style={styles.linkRow}>
                    <Image
                        style={{ width: px(80), height: px(80) }}
                        source={{ uri: require('../images/icon-myOrder1') }} />
                    <Text allowFontScaling={false} style={[styles.linkRowTxt, styles.linkRowTxt1]}>我的订单</Text>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.9} style={styles.linkRow}>
                    <Image
                        style={{ width: px(80), height: px(80) }}
                        source={{ uri: require('../images/icon-gold') }} />
                    <Text
                        allowFontScaling={false} style={[styles.linkRowTxt, styles.linkRowTxt1]}>
                        我的金币
                            </Text>
                    <Text allowFontScaling={false} style={styles.linkRowTxt2}>{UserInfo.stunnerTotalAmount}元</Text>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.9} style={styles.linkRow}>
                    <Image
                        style={{ width: px(80), height: px(80) }}
                        source={{ uri: require('../images/icon-myCoupon1') }} />
                    <Text
                        allowFontScaling={false} style={[styles.linkRowTxt, styles.linkRowTxt1]}>
                        我的代金券
                            </Text>
                    <Text allowFontScaling={false} style={styles.linkRowTxt2}>{UserInfo.couponCount}张</Text>
                </TouchableOpacity>
            </View>

添加设置页

几乎每一个 App 都有一个设置页，在这里可以看到 App 的版本号、帮助信息等，我们这里实现一个这样的页面，并把本地日志的入口也放在这里。

在 src 下新建一个 center 文件夹，在 center 下新建一个 setting.js 文件，我们在这文件里简单的写几个设置，将需要的信息显示出来。

在 src/index.js 中添加设置页的引用。

import Setting from './center/setting'

'Setting':{
        screen: Setting
    }

在个人页添加一个跳转方法，让顶部的齿轮可以跳转到我们新建的设置页。

 /**
     * 页面跳转方法
     * @param {*} name 
     * @param {*} data 
     */
    go(name, data) {
        this.props.navigation.navigate(name, data);
    }

{/*顶部功能组件*/}
            <TopHeader title='个人中心'
                boxStyles={{ backgroundColor: "#d0648f" }}
                textStyle={{ color: '#fff' }}
                rightBtn={<TouchableOpacity onPress={() => this.go('Setting')}>
                    <Image
                        style={{ width: px(42), height: px(42) }}
                        source={{ uri: require('../images/icon-setting') }} />
                </TouchableOpacity>}
                showLeft={false} />

设置页目前比较简单，这里先预留一个 App 版本号、bundle 版本号、开发版本号即可，最下面放一个退出登录。

日志列表页

在 src 下创建一个 debug 文件夹，在 debug 下添加一个 index.js 文件。

这里使用 getlogs 的方法把所有日志拿出来。

注意：想要记录更多日志千万不要使用这种方式，最好把日志存入本地存储或者数据库，用的时候分段获取。

render() {
        return <View style={{ flex: 1 }}>
            {/*顶部组件*/}
            <TopHeader title='日志列表' navigation={this.props.navigation} />
            {/*日志简略信息列表*/}
            <ScrollView style={styles.container}>
                <View style={styles.logs}>
                    {this.state.logs.map((item, index) =>
                        <TouchableWithoutFeedback key={index} onPress={() => this.show(index)}>
                            <View style={styles.line}>
                                {item[2] && <Text allowFontScaling={false} style={styles.rowTxt}>{item[0] + item[2]}</Text>}
                                {!item[2] && <Text allowFontScaling={false} style={styles.rowTxt}>{item[0]}</Text>}
                            </View>
                        </TouchableWithoutFeedback>
                    )}
                </View>
            </ScrollView>
        </View>
    }

在 src/debug/ 下创建 log.js，将记录的日志显示在这里。

render() {
        return <View style={{ flex: 1 }}>
            <TopHeader title='日志' navigation={this.props.navigation} />
            <ScrollView style={styles.container}>
                <View style={styles.logs}>
                    {this.state.logs.map((item, index) =>
                        <View style={styles.line} key={index}>
                            <Text allowFontScaling={false} style={styles.rowTxt}>{item}</Text>
                        </View>
                    )}
                </View>
            </ScrollView>
        </View>
    }

以后再需要的时候也可以把日志放入本地存储，甚至直接提交到服务器。