知识点:
- 改造顶部组件
- 添加个人中心页
- 添加设置页和日志页
这一篇内容我们写一个简单的个人界面,由于接口不能用,这里就使用假的接口去做数据请求。
设置 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>
}
以后再需要的时候也可以把日志放入本地存储,甚至直接提交到服务器。