第06课：个人中心设置及 Debug 日志

以你之姓@ 2022-12-09 11:48 118阅读 0赞

知识点：

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

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

### 设置 header ###

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

![enter image description here][]

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

![enter image description here][enter image description here 1]

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

![3f85e810-210a-11e8-83bc-b1ab4114b43c][]

### 伪造请求结果 ###

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

在 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"
    }

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

### 完成界面开发 ###

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

![b0e1f110-21d8-11e8-853e-7da388615e3c][]

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

{/*个人简略信息组件*/}
                <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 版本号、开发版本号即可，最下面放一个退出登录。

![37c5eb00-21f2-11e8-afd0-079bca81b4e9][]

![enter image description here][enter image description here 2]

### 日志列表页 ###

在 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>
        }

![f6536f00-21f4-11e8-afd0-079bca81b4e9][]

在 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>
        }

![3ccca9b0-21f5-11e8-afd0-079bca81b4e9][]

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

[enter image description here]: /images/20221123/cb8d5a3aa2fd446f9d70284f0a1bc95c.png
[enter image description here 1]: /images/20221123/a6c1ef8d652d4dde9fd2e4e6495a6156.png
[3f85e810-210a-11e8-83bc-b1ab4114b43c]: /images/20221123/6f00a34d11c2419c8e317bd01d1bb956.png
[b0e1f110-21d8-11e8-853e-7da388615e3c]: /images/20221123/36c050a6fc964cf68df24407c302531d.png
[37c5eb00-21f2-11e8-afd0-079bca81b4e9]: /images/20221123/ae3448680097474eba2dd1166790706b.png
[enter image description here 2]: /images/20221123/e9f2c93d87704c80a322ba6b913d68ef.png
[f6536f00-21f4-11e8-afd0-079bca81b4e9]: /images/20221123/54e8d7d151aa417cb77773635fc4b725.png
[3ccca9b0-21f5-11e8-afd0-079bca81b4e9]: /images/20221123/2cfe8ffc017247d3a015ca00393844ee.png