本站文章均为李华明Himi原创,转载务必在明显处注明:
转载自【黑米GameDev街区】 原文链接:http://www.himigame.com/react-native/2285.html
在第五篇中介绍了使用导航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组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity)。
在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
在从根视图开始就使用RN编写的应用中,你应该使用Navigator来代替Modal。通过一个最顶层的Navigator,你可以通过configureScene属性更加方便的控制如何将模态场景覆盖显示在你App其余的部分上。
简单来说,利用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);">演示效果图:(点击查看动态效果)