【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)

前端之家收集整理的这篇文章主要介绍了【REACT NATIVE 系列教程之八】不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本站文章均为李华明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:

  1. this.state={
  2. pageIndex:0
  3. };

代码段2:

  1. switch(this.state.pageIndex){
  2. case0:
  3. return(
  4. ......
  5. );
  6. case1:
  7. return(
  8. ......
  9. );
  10. case2:
  11. return(
  12. ......
  13. );
  14. }

其实此种方式非常容易理解,是利用对变量的操作,进而控制绘制的不同。

当通过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是个崭新空白的(页面)场景。

示例:

  1. <Modal
  2. animated={this.state.animationType}
  3. transparent={this.state.transparent}
  4. visible={this.state.modalVisible}
  5. onRequestClose={()=>{this._setModalVisible(false)}}
  6. >
  7. </Modal>


animated: (bool类型)是否带有动画效果

注意:animated是旧版本才有的属性

新版本属性为:animationType enum(‘none’,‘slide’,‘fade’)

transparent: (bool类型)是否透明

visible: (bool类型)是否可见

onRequestClose:( 回调函数 )是指Android的返回实体按钮,ios可以不用处理

需要强调的是,Modal 在设置为可见情况下,默认覆盖当前视图之上。

为了更好的演示效果代码参考,Himi专门写了一个示例,如下两个文件

Main.js 是入口显示的主要视图

  1. importReact,{
  2. AppRegistry,Component,View,Text,StyleSheet,TouchableHighlight,Modal,}from'react-native';
  3.  
  4.  
  5. importSecondPagefrom"./SecondPage";
  6.  
  7. exportdefaultclassMainextendsComponent{
  8. constructor(props){
  9. super(props);
  10. this.state={
  11. animationType:true,modalVisible:true,transparent:true,pageIndex:0
  12. };
  13. }
  14.  
  15. _setModalVisible(visible){
  16. this.setState({modalVisible:visible});
  17. }
  18.  
  19. replaceScene(){
  20. this.setState({pageIndex:1});
  21. }
  22. addModal(){
  23. this.setState({pageIndex:2});
  24. }
  25.  
  26. render(){
  27. switch(this.state.pageIndex){
  28. case0:
  29. return(
  30. <Viewstyle={styles.container}>
  31.  
  32. <Textstyle={styles.himiTextStyle}>HimiReactNative教程</Text>
  33. <Viewstyle={styles.himiViewStyle}>
  34. <TouchableHighlight
  35. underlayColor='#f00'
  36. onPress={this.replaceScene.bind(this)}
  37. >
  38. <Textstyle={{fontSize:20}}>点击切换页面</Text>
  39. </TouchableHighlight>
  40.  
  41. <TouchableHighlight
  42. underlayColor='#f00'
  43. onPress={this.addModal.bind(this)}
  44. >
  45. <Textstyle={{fontSize:20}}>点击添加Modal</Text>
  46. </TouchableHighlight>
  47. </View>
  48. </View>
  49. );
  50. case1:
  51. return<SecondPage/>;
  52. case2:
  53. return(
  54. <Viewstyle={styles.container}>
  55. <Modal
  56. animated={this.state.animationType}
  57. transparent={this.state.transparent}
  58. visible={this.state.modalVisible}
  59. onRequestClose={()=>{this._setModalVisible(false)}}
  60. >
  61. <Viewstyle={styles.modalViewStyle}>
  62. <TouchableHighlight
  63. underlayColor='#4169e1'
  64. onPress={this._setModalVisible.bind(this,false)}
  65. >
  66. <Textstyle={styles.text}>我是Modal,点击将隐藏</Text>
  67. </TouchableHighlight>
  68. </View>
  69. </Modal>
  70.  
  71. <Textstyle={styles.himiTextStyle}>HimiReactNative教程</Text>
  72. <Viewstyle={styles.himiViewStyle}>
  73. <TouchableHighlight
  74. underlayColor='#f00'
  75. onPress={this.replaceScene.bind(this)}
  76. >
  77. <Textstyle={{fontSize:20}}>点击切换页面</Text>
  78.  
  79. </TouchableHighlight>
  80. </View>
  81. </View>
  82. );
  83. }
  84. }
  85. };
  86.  
  87. varstyles=StyleSheet.create({
  88. container:{
  89. flex:1,flexDirection:'column',justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',},text:{
  90. color:'#fff',fontSize:30,himiViewStyle:{
  91. flex:1,modalViewStyle:{
  92. flex:1,backgroundColor:'#F00',himiTextStyle:{
  93. color:'#f00',marginTop:70,});

SecondPage.js 是用来展示第一种逻辑切页用的

  1. importReact,}from'react-native';
  2.  
  3. importMainfrom"./Main";
  4.  
  5. exportdefaultclassSecondPageextendsReact.Component{
  6. constructor(props){
  7. super(props);
  8. this.state={
  9. pageIndex:0
  10. };
  11.  
  12. }
  13. replaceScene(){
  14. this.setState({pageIndex:1});
  15. }
  16.  
  17. render(){
  18. switch(this.state.pageIndex){
  19. case0:
  20. return(
  21. <Viewstyle={styles.himiViewStyle}>
  22.  
  23. <Viewstyle={styles.himiViewStyle}>
  24. <TouchableHighlight
  25. underlayColor='#4169e1'
  26. onPress={this.replaceScene.bind(this)}
  27. >
  28. <Textstyle={styles.text}>我是SecondPage,点我切换</Text>
  29. </TouchableHighlight>
  30. </View>
  31. </View>
  32. )
  33. case1:
  34. return<Main/>;
  35. }
  36. }
  37. };
  38.  
  39. varstyles=StyleSheet.create({
  40.  
  41. text:{
  42. color:'#f00',fontSize:20,backgroundColor:'#FF0',51);">演示效果图:(点击查看动态效果

  43. user29

猜你在找的React相关文章