依据昨天我们设置的首页导航条，今天我们继续完成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
-
