【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场
|
本站文章均为李华明Himi原创,转载务必在明显处注明：
在第五篇中介绍了使用导航Navigator进行(页面)场景的切换，但是对于一些需求其实是无法满足，或者说太浪费。例如： 1. 只是想做一个很简单的页面切换，并不需要记录从哪来～也不需要手势滑屏返回等，这时使用导航Navigator太浪费了。 2. 假设: a) 有个View 包括一个Navigator组件和一个Image组件 b) Navigator 对页面A ，B，C之间进行导航 此时我们有个需求在B页面切换到一个崭新空白的页面场景中（不带Image），此时我们想要通过Navigator实现需求则变得非常麻烦。（为此，Himi考虑尝试了很多方式） 本篇主要介绍除了使用Navigator 之外的两种切换页面的方法： 一：采用逻辑控制绘制 代码段1： this.state={
pageIndex:0
};
代码段2： switch(this.state.pageIndex){
case0:
return(
......
);
case1:
return(
......
);
case2:
return(
......
);
}
其实此种方式非常容易理解，是利用对变量的操作，进而控制绘制的不同。 当通过this.setState()函数对pageIndex进行修改，从而this进行重绘时，会根据pageIndex的值不同，绘制出各不相同的内容。 （运行效果放在最后一并展示） 二：采用Modal组件 Modal组件，首先给出官方解释：
简单来说，利用Modal只是模拟感觉切（页面）场景的，Modal只是覆盖到当前视图上而已，且可以任意布局和添加组件，Modal是个崭新空白的（页面）场景。 示例： <Modal
animated={this.state.animationType}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={()=>{this._setModalVisible(false)}}
>
</Modal>
animated: （bool类型）是否带有动画效果 注意：animated是旧版本才有的属性 新版本属性为：animationType enum(‘none’,‘slide’,‘fade’) transparent: (bool类型)是否透明 visible: (bool类型)是否可见 onRequestClose:( 回调函数 )是指Android的返回实体按钮，ios可以不用处理 需要强调的是，Modal 在设置为可见情况下，默认覆盖当前视图之上。 为了更好的演示效果与代码参考，Himi专门写了一个示例，如下两个文件： Main.js 是入口显示的主要视图 importReact,{
AppRegistry,Component,View,Text,StyleSheet,TouchableHighlight,Modal,}from'react-native';
importSecondPagefrom"./SecondPage";
exportdefaultclassMainextendsComponent{
constructor(props){
super(props);
this.state={
animationType:true,modalVisible:true,transparent:true,pageIndex:0
};
}
_setModalVisible(visible){
this.setState({modalVisible:visible});
}
replaceScene(){
this.setState({pageIndex:1});
}
addModal(){
this.setState({pageIndex:2});
}
render(){
switch(this.state.pageIndex){
case0:
return(
<Viewstyle={styles.container}>
<Textstyle={styles.himiTextStyle}>HimiReactNative教程</Text>
<Viewstyle={styles.himiViewStyle}>
<TouchableHighlight
underlayColor='#f00'
onPress={this.replaceScene.bind(this)}
>
<Textstyle={{fontSize:20}}>点击切换页面</Text>
</TouchableHighlight>
<TouchableHighlight
underlayColor='#f00'
onPress={this.addModal.bind(this)}
>
<Textstyle={{fontSize:20}}>点击添加Modal</Text>
</TouchableHighlight>
</View>
</View>
);
case1:
return<SecondPage/>;
case2:
return(
<Viewstyle={styles.container}>
<Modal
animated={this.state.animationType}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={()=>{this._setModalVisible(false)}}
>
<Viewstyle={styles.modalViewStyle}>
<TouchableHighlight
underlayColor='#4169e1'
onPress={this._setModalVisible.bind(this,false)}
>
<Textstyle={styles.text}>我是Modal,点击将隐藏</Text>
</TouchableHighlight>
</View>
</Modal>
<Textstyle={styles.himiTextStyle}>HimiReactNative教程</Text>
<Viewstyle={styles.himiViewStyle}>
<TouchableHighlight
underlayColor='#f00'
onPress={this.replaceScene.bind(this)}
>
<Textstyle={{fontSize:20}}>点击切换页面</Text>
</TouchableHighlight>
</View>
</View>
);
}
}
};
varstyles=StyleSheet.create({
container:{
flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},text:{
color:'#fff',fontSize:30,himiViewStyle:{
flex:1,modalViewStyle:{
flex:1,backgroundColor:'#F00',himiTextStyle:{
color:'#f00',marginTop:70,});
SecondPage.js 是用来展示第一种逻辑切页用的 importReact,}from'react-native';
importMainfrom"./Main";
exportdefaultclassSecondPageextendsReact.Component{
constructor(props){
super(props);
this.state={
pageIndex:0
};
}
replaceScene(){
this.setState({pageIndex:1});
}
render(){
switch(this.state.pageIndex){
case0:
return(
<Viewstyle={styles.himiViewStyle}>
<Viewstyle={styles.himiViewStyle}>
<TouchableHighlight
underlayColor='#4169e1'
onPress={this.replaceScene.bind(this)}
>
<Textstyle={styles.text}>我是SecondPage,点我切换</Text>
</TouchableHighlight>
</View>
</View>
)
case1:
return<Main/>;
}
}
};
varstyles=StyleSheet.create({
text:{
color:'#f00',fontSize:20,backgroundColor:'#FF0',51);">演示效果图：（点击查看动态效果）
|
