原来已经支持
- Realm
了,那么这边另起一篇专门介绍两种常用的存储方式 ———— React-Native 之 数据持久化
- React-Native
有将
- 官方
做本地缓存的功能,为了让大家知道怎么做,我们就简单地来实验一下,具体逻辑在每个产品中都或多或少有些差异,这个朋友们就根据所学的灵活变通一下就可以了!
- 商品数据
的封装。
- 基础
- var RealmBase = {};
- import Realm from 'realm';
- const HomeSchame = {
- name: 'HomeData',
- properties: {
- id: 'int',
- title: 'string',
- image: 'string',
- mall: 'string',
- pubtime: 'string',
- fromsite: 'string',
- }
- };
- const HTSchame = {
- name: 'HTData',
- properties: {
- id: 'int',
- title: 'string',
- image: 'string',
- mall: 'string',
- pubtime: 'string',
- fromsite: 'string',
- }
- };
- // 初始化realm
- let realm = new Realm({
- schema: [HomeSchame, HTSchame]
- });
- // 增加
- RealmBase.create = function(schame, data) {
- realm.write(() = >{
- for (let i = 0; i < data.length; i++) {
- let temp = data[i];
- realm.create(schame, {
- id: temp.id,
- title: temp.title,
- image: temp.image,
- mall: temp.mall,
- pubtime: temp.pubtime,
- fromsite: temp.fromsite
- });
- }
- })
- }
- // 查询全部数据
- RealmBase.loadAll = function(schame) {
- return realm.objects(schame);
- }
- // 条件查询
- RealmBase.filtered = function(schame, filtered) {
- // 获取对象
- let objects = realm.objects(schame);
- // 筛选
- let object = objects.filtered(filtered);
- if (object) { // 有对象
- return object;
- } else {
- return '未找到数据';
- }
- }
- // 删除所有数据
- RealmBase.removeAllData = function(schame) {
- realm.write(() = >{
- // 获取对象
- let objects = realm.objects(schame);
- // 删除表
- realm.delete(objects);
- })
- }
- global.RealmBase = RealmBase;
文件内,这样我们就可以确保
- main
是在我们使用它之前就被调用过,避免找不到对象的错误(我们也同时将
- 全局变量
修改为全局,方便使用)。
- HTTPBase
- import RealmStorage from '../storage/realmStorage';
实验,这边我们的逻辑就是,当网络出现问题的时候,每次都会进到 catch 中返回错误 code 告诉我们,出现了什么问题(既然进到这里了,是不是数据无论如何都不会加载成功?),那么我们就可以在这里
- 本地持久化
本地数据,然后展示出来,那么数据的应该在哪里保存呢?这个我们只需要在每次
- 取出
完成并且渲染完成后,保存一下数据就可以了。
- 刷新
- // 加载最新数据网络请求
- loadData(resolve) {
- let params = {
- "count": 10
- };
- HTTPBase.get('https://guangdiu.com/api/getlist.php', params).then((responseData) = >{
- // 清空数组
- this.data = [];
- // 拼接数据
- this.data = this.data.concat(responseData.data);
- // 重新渲染
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(this.data),
- loaded: true,
- });
- // 关闭刷新动画
- if (resolve !== undefined) {
- setTimeout(() = >{
- resolve();
- },
- 1000);
- }
- // 存储数组中最后一个元素的id
- let cnlastID = responseData.data[responseData.data.length - 1].id;
- AsyncStorage.setItem('cnlastID', cnlastID.toString());
- // 存储数组中第一个元素的id
- let cnfirstID = responseData.data[0].id;
- AsyncStorage.setItem('cnfirstID', cnfirstID.toString());
- // 清楚本地存储的数据
- RealmBase.removeAllData('HomeData');
- // 存储数据到本地
- RealmBase.create('HomeData', responseData.data);
- }).
- catch((error) = >{
- // 拿到本地存储的数据,展示出来,如果没有存储,那就显示无数据页面
- this.data = RealmBase.loadAll('HomeData');
- // 重新渲染
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(this.data),
- loaded: true,
- });
- })
- }
并且成功将数据取出,这边数据持久化的实验就完成了。
- 数据本地持久化
译注:
的配置,可转到 React-Native 之 数据持久化 查看,这边不多赘述。
- realm
后,会发现整个工程
- realm
,不用担心,这些只不过是
- 多出将近500M+
的依赖库,等我们后面
- realm
后就不会有这么多东西了。
- 打包
进行对代码进行托管,那么,如果从仓库拉取最新数据时,是不是还是要重新配置
- git
文件夹,这个就很麻烦了,我们可以备份一下
- node_modules
文件夹,将它
- node_modules
进工程就可以使用了。
- 拷贝
文件内包含了需要忽略或保留的文件的一些配置,灵活使用可以减少我们的工作量,但是里面的内容是什么意思呢?这边也给大家说下:
- gitignore
文件的内容了,举个栗子:
- gitignore
- #Xcode // 注释,说明这是 Xcode 配置
- #build / // 忽略 build 文件夹下所有内容
- * .pbxuser // 忽略以 .pbxuser 为后缀的文件
- !
- default.pbxuser // 除 default.pbxuser 文件外
- * .mode1v3 // 忽略以 .mode1v3 为后缀的文件
- !
- default.mode1v3 // 除 default.mode1v3 文件外
- #node.js // 注释,说明这是 node 配置
- #node_modules / // 忽略 node_modules 文件夹内所有内容
- npm - debug.log // 忽略 npm-debug.log
- yarn - error.log // 忽略 yarn-error.log
的内容,可以到 git 介绍与使用 查看学习。
- git
了,为什么不直接在前面自定义的
- cell
里面再添加一些操作,使所有的
- cell
共用同一套组件?其实考虑到下面几点原因:
- cell
和
- 半小时热门的cell
区别在于少了
- 三大模块的cell
这一栏的 2 个控件,其他地方是一样的,如果我们做到一起那也是可以的,但是这样会造成一个组件里面担负过多业务逻辑,在
- 优惠平台和数据提供平台
是没关系,但是
- 数据量少
那么需要渲染的成本就会增加,也就会严重影响到性能。
- 数据量一多
文件,并且我们将前面
- GDCommunalCell
里面的内容
- 自定义cell
一下,放到这个文件中,并进行相应修改:
- copy
- export
- default class GDCommunalCell extends Component {
- static propTypes = {
- image: PropTypes.string,
- title: PropTypes.string,
- mall: PropTypes.string,
- pubTime: PropTypes.string,
- fromSite: PropTypes.string,
- };
- renderDate(pubTime, fromSite) {
- // 时间差的计算
- let minute = 1000 * 60; // 1分钟
- let hour = minute * 60; // 1小时
- let day = hour * 24; // 1天
- let week = day * 7; // 1周
- let month = day * 30; // 1个月
- // 计算时间差
- let now = new Date().getTime(); // 获取当前时间
- let diffValue = now - Date.parse(pubTime.replace(/-/gi, "/"));
- if (diffValue < 0) return;
- let monthC = diffValue / month; // 相差了几个月
- let weekC = diffValue / week; // 相差几周
- let dayC = diffValue / day; // 相差几天
- let hourC = diffValue / hour // 相差几小时
- let minuteC = diffValue / minute; // 相差几分钟
- let result;
- if (monthC >= 1) {
- result = parseInt(monthC) + "月前";
- } else if (weekC >= 1) {
- result = parseInt(weekC) + "周前";
- } else if (dayC >= 1) {
- result = parseInt(dayC) + "天前";
- } else if (hourC >= 1) {
- result = parseInt(hourC) + "小时前";
- } else if (minuteC >= 1) {
- result = parseInt(minuteC) + "分钟前";
- } else result = "刚刚";
- return result + ' · ' + fromSite;
- }
- render() {
- return ( < View style = {
- styles.container
- } > {
- /* 左边图片 */
- } < Image source = {
- {
- uri: this.props.image === '' ? 'defaullt_thumb_83x83': this.props.image
- }
- }
- style = {
- styles.imageStyle
- }
- />
- {/ * 中间 * /}
- <View style={styles.centerViewStyle}>
- {/ * 标题 * /}
- <View>
- <Text numberOfLines={3} style={styles.titleStyle}>{this.props.title}</Text > </View>
- {/ * 详情 * /}
- <View style={styles.detailViewStyle}>
- {/ * 平台 * /}
- <Text style={styles.detailMallStyle}>{this.props.mall}</Text > {
- /* 时间 + 来源 */
- } < Text style = {
- styles.timeStyle
- } > {
- this.renderDate(this.props.pubTime, this.props.fromSite)
- } < /Text>
- </View > </View>
- {/ * 右边的箭头 * /}
- <Image source={{uri:'icon_cell_rightArrow'}} style={styles.arrowStyle} / > </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flexDirection:'row',
- alignItems:'center',
- justifyContent:'space-between',
- backgroundColor:'white',
- height:100,
- width:width,
- borderBottomWidth:0.5,
- borderBottomColor:'gray',
- marginLeft:15
- },
- imageStyle: {
- width:70,
- height:70,
- },
- centerViewStyle: {
- height:70,
- justifyContent:'space-around',
- },
- titleStyle: {
- width:width * 0.65,
- },
- detailViewStyle: {
- flexDirection:'row',
- justifyContent:'space-between',
- alignItems:'center'
- },
- detailMallStyle: {
- fontSize:12,
- color:'green',
- },
- timeStyle: {
- fontSize:12,
- color:'gray',
- },
- arrowStyle: {
- width:10,
- height:10,
- marginRight:30,
- }
- });
- /
译注:
中,获取到的月份是和我们现在的月份少
- JAVA
,这是因为
- 1个月的
的月份是从
- JAVA
开始,
- 0
也是一样的。
- Javascript
首页或者海淘的代码,修改请求这部分代码:
- copy
- export
- default class GDHourList extends Component {
- // 构造
- constructor(props) {
- super(props);
- // 初始状态
- this.state = {
- dataSource: new ListView.DataSource({
- rowHasChanged: (r1, r2) = >r1 !== r2
- }),
- loaded: false,
- prompt: '',
- };
- this.nexthourhour = '';
- this.nexthourdate = '';
- this.lasthourhour = '';
- this.lasthourdate = '';
- this.loadData = this.loadData.bind(this);
- }
- // 加载最新数据网络请求
- loadData(resolve, date, hour) {
- let params = {};
- if (date) {
- params = {
- "date": date,
- "hour": hour
- }
- }
- HTTPBase.get('http://guangdiu.com/api/getranklist.php', params).then((responseData) = >{
- // 重新渲染
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(responseData.data),
- loaded: true,
- prompt: responseData.displaydate + responseData.rankhour + '点档' + '(' + responseData.rankduring + ')'
- });
- // 关闭刷新动画
- if (resolve !== undefined) {
- setTimeout(() = >{
- resolve();
- },
- 1000);
- }
- // 暂时保留一些数据
- this.nexthourhour = responseData.nexthourhour;
- this.nexthourdate = responseData.nexthourdate;
- this.lasthourhour = responseData.lasthourhour;
- this.lasthourdate = responseData.lasthourdate;
- }).
- catch((error) = >{
- })
- }
- // 跳转到设置
- pushToSettings() {
- this.props.navigator.push({
- component: Settings,
- })
- }
- // 返回中间标题
- renderTitleItem() {
- return ( < Image source = {
- {
- uri: 'navtitle_rank_106x20'
- }
- }
- style = {
- styles.navbarTitleItemStyle
- }
- />
- );
- }
- / / 返回右边按钮renderRightItem() {
- return ( < TouchableOpacity onPress = { () = >{
- this.pushToSettings()
- }
- } > <Text style = {
- styles.navbarRightItemStyle
- } > 设置 < /Text>
- </TouchableOpacity > );
- }
- // 根据网络状态决定是否渲染 listview
- renderListView() {
- if (this.state.loaded === false) {
- return ( < NoDataView / >);
- } else {
- return ( < PullList onPullRelease = { (resolve) = >this.loadData(resolve)
- }
- dataSource = {
- this.state.dataSource
- }
- renderRow = {
- this.renderRow.bind(this)
- }
- showsHorizontalScrollIndicator = {
- false
- }
- style = {
- styles.listViewStyle
- }
- initialListSize = {
- 5
- }
- />
- );
- }
- }
- / / 跳转到详情页pushToDetail(value) {
- this.props.navigator.push({
- component: CommunalDetail,
- params: {
- url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value
- }
- })
- }
- // 返回每一行cell的样式
- renderRow(rowData) {
- return ( < TouchableOpacity onPress = { () = >this.pushToDetail(rowData.id)
- } > <CommunalCell image = {
- rowData.image
- }
- title = {
- rowData.title
- }
- mall = {
- rowData.mall
- }
- pubTime = {
- rowData.pubtime
- }
- fromSite = {
- rowData.fromsite
- }
- />
- </TouchableOpacity > );
- }
- componentDidMount() {
- this.loadData();
- }
- lastHour() {
- this.loadData(undefined, this.lasthourdate, this.lasthourhour);
- }
- nextHour() {
- this.loadData(undefined, this.nexthourdate, this.nexthourhour);
- }
- render() {
- return ( < View style = {
- styles.container
- } > {
- /* 导航栏样式 */
- } < CommunalNavBar titleItem = { () = >this.renderTitleItem()
- }
- rightItem = { () = >this.renderRightItem()
- }
- />
- {/ * 提醒栏 * /}
- <View style={styles.promptViewStyle}>
- <Text>{this.state.prompt}</Text > </View>
- {/ * 根据网络状态决定是否渲染listview * /}
- {this.renderListView()}
- {/ * 操作栏 * /}
- <View style={styles.operationViewStyle}>
- <TouchableOpacity
- onPress={() => this.lastHour()}
- >
- <Text style={{marginRight:10, fontSize:17, color:'green'}}>{"< " + "上1小时"}</Text > </TouchableOpacity>
- <TouchableOpacity
- onPress={() => this.nextHour()}
- >
- <Text style={{marginLeft:10, fontSize:17, color:'green'}}>{"下1小时" + " >"}</Text > </TouchableOpacity>
- </View > </View>
- );
- }
- }
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- backgroundColor: 'white',
- },
- navbarTitleItemStyle: {
- width:106,
- height:20,
- marginLeft:50
- },
- navbarRightItemStyle: {
- fontSize:17,
- color:'rgba(123,178,114,1.0)',
- marginRight:15,
- },
- promptViewStyle: {
- width:width,
- height:44,
- alignItems:'center',
- justifyContent:'center',
- backgroundColor:'rgba(251,251,251,1.0)',
- },
- operationViewStyle: {
- width:width,
- height:44,
- flexDirection:'row',
- justifyContent:'center',
- alignItems:'center',
- },
- });/
九宫格,这个我们在 React-Native 之 ListView 使用 中有这样的案例,不清楚的可以再回去看一下,所以这边我们也使用
ListView实现。
HomeSiftData文件和
HTSiftData文件放到工程内。
export default class GDCommunalSiftMenu extends Component { static defaultProps = { removeModal: {}, loadSiftData: {} }; static propTypes = { data: PropTypes.array, }; // 构造 constructor(props) { super(props); // 初始状态 this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) = >r1 !== r2 }) }; } // 退出 popToHome(data) { this.props.removeModal(data); } // 点击事件 siftData(mall, cate) { this.props.loadSiftData(mall, cate); this.popToHome(false); } // 处理数据 loadData() { let data = []; for (let i = 0; i < this.props.data.length; i++) { data.push(this.props.data[i]); } // 重新渲染 this.setState({ dataSource: this.state.dataSource.cloneWithRows(data), }) } renderRow(rowData) { return ( < View style = { styles.itemViewStyle } > <TouchableOpacity onPress = { () = >this.siftData(rowData.mall, rowData.cate) } > <View style = { styles.itemViewStyle } > <Image source = { { uri: rowData.image } } style = { styles.itemImageStyle } /> <Text>{rowData.title}</Text > </View> </TouchableOpacity > </View> ) } componentDidMount() { this.loadData(); } render() { return( <TouchableOpacity onPress={() => this.popToHome(false)} activeOpacity={1} > <View style={styles.container}> {/ * 菜单内容 * /} <ListView dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} contentContainerStyle={styles.contentViewStyle} initialListSize={16} / > </View> </TouchableOpacity > ) } } const styles = StyleSheet.create({ container: { width: width, height: height }, contentViewStyle: { flexDirection: 'row', flexWrap: 'wrap', width: width, top: Platform.OS === 'ios' ? 64 : 44, }, itemViewStyle: { width: width * 0.25, height: 70, backgroundColor: 'rgba(249,249,249,1.0)', justifyContent: 'center', alignItems: 'center' }, itemImageStyle: { width: 40, height: 40 } });
// 加载最新数据网络请求 loadSiftData(mall, cate) { let params = {}; if (mall === "" && cate === "") { // 全部 this.loadData(undefined); return; } if (mall === "") { // cate 有值 params = { "cate" : cate }; }else { params = { "mall" : mall }; } HTTPBase.get('https://guangdiu.com/api/getlist.php', params) .then((responseData) => { // 清空数组 this.data = []; // 拼接数据 this.data = this.data.concat(responseData.data); // 重新渲染 this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.data), loaded:true, }); // 存储数组中最后一个元素的id let cnlastID = responseData.data[responseData.data.length - 1].id; AsyncStorage.setItem('cnlastID', cnlastID.toString()); }) .catch((error) => { }) }
海淘模块内也使用一下就可以了。
export default class GDHome extends Component { // 构造 constructor(props) { super(props); // 初始状态 this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) = >r1 !== r2 }), loaded: false, isModal: false }; this.data = []; this.changeText = ''; this.loadData = this.loadData.bind(this); this.loadMore = this.loadMore.bind(this); } // 加载最新数据网络请求 loadData(resolve) { if (!this.changeText) return; let params = { "q": this.changeText }; HTTPBase.get('http://guangdiu.com/api/getresult.php', params).then((responseData) = >{ // 清空数组 this.data = []; // 拼接数据 this.data = this.data.concat(responseData.data); // 重新渲染 this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.data), loaded: true, }); // 关闭刷新动画 if (resolve !== undefined) { setTimeout(() = >{ resolve(); }, 1000); } // 存储数组中最后一个元素的id let searchLastID = responseData.data[responseData.data.length - 1].id; AsyncStorage.setItem('searchLastID', searchLastID.toString()); }). catch((error) = >{}) } // 加载更多数据的网络请求 loadMoreData(value) { let params = { "q": this.changeText, "sinceid": value }; HTTPBase.get('http://guangdiu.com/api/getresult.php', params).then((responseData) = >{ // 拼接数据 this.data = this.data.concat(responseData.data); this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.data), loaded: true, }); // 存储数组中最后一个元素的id let searchLastID = responseData.data[responseData.data.length - 1].id; AsyncStorage.setItem('searchLastID', searchLastID.toString()); }). catch((error) = >{}) } // 加载更多数据操作 loadMore() { // 读取id AsyncStorage.getItem('searchLastID').then((value) = >{ // 数据加载操作 this.loadMoreData(value); }) } // 返回 pop() { // 回收键盘 dismissKeyboard(); this.props.navigator.pop(); } // 返回左边按钮 renderLeftItem() { return ( < TouchableOpacity onPress = { () = >{ this.pop() } } > <View style = { { flexDirection: 'row', alignItems: 'center' } } > <Image source = { { uri: 'back' } } style = { styles.navbarLeftItemStyle } /> <Text>返回</Text > </View> </TouchableOpacity > ); } // 返回中间按钮 renderTitleItem() { return ( < Text style = { styles.navbarTitleItemStyle } > 搜索全网折扣 < /Text> ); } / / ListView尾部renderFooter() { return ( < View style = { { height: 100 } } > <ActivityIndicator / ></View> ); } / / 根据网络状态决定是否渲染listview renderListView() { if (this.state.loaded === false) { return ( < NoDataView / >); } else { return ( < PullList onPullRelease = { (resolve) = >this.loadData(resolve) } dataSource = { this.state.dataSource } renderRow = { this.renderRow.bind(this) } showsHorizontalScrollIndicator = { false } style = { styles.listViewStyle } initialListSize = { 5 } renderHeader = { this.renderHeader } onEndReached = { this.loadMore } onEndReachedThreshold = { 60 } renderFooter = { this.renderFooter } /> ); } } / / 跳转到详情页pushToDetail(value) { this.props.navigator.push({ component: CommunalDetail, params: { url: 'https://guangdiu.com/api/showdetail.php' + '?' + 'id=' + value } }) } // 返回每一行cell的样式 renderRow(rowData) { return ( < TouchableOpacity onPress = { () = >this.pushToDetail(rowData.id) } > <CommunalCell image = { rowData.image } title = { rowData.title } mall = { rowData.mall } pubTime = { rowData.pubtime } fromSite = { rowData.fromsite } /> </TouchableOpacity > ); } render() { return ( < View style = { styles.container } > { /* 导航栏样式 */ } < CommunalNavBar leftItem = { () = >this.renderLeftItem() } titleItem = { () = >this.renderTitleItem() } /> {/ * 顶部工具栏 * /} <View style={styles.toolsViewStyle} > {/ * 左边 * /} <View style={styles.inputViewStyle} > <Image source={{uri:'search_icon_20x20'}} style={styles.searchImageStyle} / > <TextInput style = { styles.textInputStyle } keyboardType = "default"placeholder = "请输入搜索商品关键字"placeholderTextColor = 'gray'autoFocus = { true } clearButtonMode = "while-editing"onChangeText = { (text) = >{ this.changeText = text } } onEndEditing = { () = >this.loadData() } /> </View > { /* 右边 */ } < View style = { { marginRight: 10 } } > <TouchableOpacity onPress = { () = >this.pop() } > <Text style = { { color: 'green' } } > 取消 < /Text> </TouchableOpacity > </View> </View > { /* 根据网络状态决定是否渲染 listview */ } { this.renderListView() } < /View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', backgroundColor: 'white', }, navbarLeftItemStyle: { width:20, height:20, marginLeft:15, }, navbarTitleItemStyle: { fontSize:17, color:'black', marginRight:50 }, navbarRightItemStyle: { width:20, height:20, marginRight:15, }, toolsViewStyle: { width:width, height:44, flexDirection:'row', alignItems:'center', justifyContent:'space-between', }, inputViewStyle: { height:35, flexDirection:'row', alignItems:'center', justifyContent:'center', backgroundColor:'rgba(239,239,241,1.0)', marginLeft:10, borderRadius:5 }, searchImageStyle: { width:15, height:15, marginLeft:8 }, textInputStyle: { width:width * 0.75, height:35, marginLeft:8 }, listViewStyle: { width:width, }, }); /
export default class GDSettingsCell extends Component { static propTypes = { leftTitle: PropTypes.string, isShowSwitch: PropTypes.bool, }; // 构造 constructor(props) { super(props); // 初始状态 this.state = { isOn: false, }; } // 返回需要的组件 renderRightContent() { let component; if (this.props.isShowSwitch) { // 显示 Switch 按钮 component = <Switch value = { this.state.isOn } onValueChange = { () = >{ this.setState({ isOn: !this.state.isOn }) } } /> }else { component = <Image source={{uri:'icon_cell_rightArrow'}} style={styles.arrowStyle} / > } return (component) } render() { return ( < View style = { styles.container } > { /* 左边 */ } < View > <Text > { this.props.leftTitle } < /Text> </View > { /* 右边 */ } < View style = { styles.rightViewStyle } > { this.renderRightContent() } < /View> </View > ) } } const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', height: Platform.OS === 'ios' ? 44 : 36, justifyContent: 'space-between', alignItems: 'center', borderBottomColor: 'gray', borderBottomWidth: 0.5, marginLeft: 15, }, rightViewStyle: { marginRight: 15, }, arrowStyle: { width: 10, height: 10, } });
export default class GDSettings extends Component { // 返回 pop() { this.props.navigator.pop(); } // 返回左边按钮 renderLeftItem() { return ( < TouchableOpacity onPress = { () = >{ this.pop() } } > <View style = { { flexDirection: 'row', alignItems: 'center' } } > <Image source = { { uri: 'back' } } style = { styles.navbarLeftItemStyle } /> <Text>返回</Text > </View> </TouchableOpacity > ); } // 返回中间按钮 renderTitleItem() { return ( < Text style = { styles.navbarTitleItemStyle } > 设置 < /Text> ); } render() { return( <View style={styles.container}> {/ * 导航栏样式 * /} <CommunalNavBar leftItem = {() => this.renderLeftItem()} titleItem = {() => this.renderTitleItem()} / > { /* 内容 */ } < ScrollView style = { styles.scollViewStyle } > { /* 第一个cell */ } < SettingsCell leftTitle = "淘宝天猫快捷下单"isShowSwitch = { true } /> {/ * 第二个cell * /} <SettingsCell leftTitle="清理图片缓存" isShowSwitch={false} / > </ScrollView> </View > ) } } const styles = StyleSheet.create({ container: { flex: 1 }, navbarLeftItemStyle: { width: 20, height: 20, marginLeft: 15, }, navbarTitleItemStyle: { fontSize: 17, color: 'black', marginRight: 50 }, scollViewStyle: { backgroundColor: 'white', }, });
来源: http://www.cnblogs.com/miaomiaoshen/p/6680464.html