转载

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

在第五篇中介绍了 使用导航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) {           case 0:             return (               ......             );           case 1:               return (                 ......               );           case 2:               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";   export default class Main extends Component {  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) {           case 0:             return (               <Viewstyle={styles.container} >                   <Text style={styles.himiTextStyle}>HimiReactNative 教程</Text>                 <Viewstyle={styles.himiViewStyle}>                   <TouchableHighlight                     underlayColor='#f00'                     onPress={this.replaceScene.bind(this)}                     >                     <Text style={{fontSize:20}}>点击切换页面</Text>                   </TouchableHighlight>                     <TouchableHighlight                     underlayColor='#f00'                     onPress={this.addModal.bind(this)}                     >                     <Text style={{fontSize:20}}>点击添加Modal</Text>                     </TouchableHighlight>                 </View>               </View>             );           case 1:               return <SecondPage/>;           case 2:               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)}                           >                             <Text style={styles.text} >  我是Modal,点击将隐藏 </Text>                         </TouchableHighlight>                       </View>                    </Modal>                     <Text style={styles.himiTextStyle}>HimiReactNative 教程</Text>                   <Viewstyle={styles.himiViewStyle}>                     <TouchableHighlight                       underlayColor='#f00'                       onPress={this.replaceScene.bind(this)}                       >                       <Text style={{fontSize:20}}>点击切换页面</Text>                         </TouchableHighlight>                   </View>                 </View>               );       }     } };   var styles = StyleSheet.create({   container: {     flex: 1,     flexDirection: 'column',     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F5FCFF',   },   text: {     color:'#fff',     fontSize:30,   },   himiViewStyle:{     flex: 1,     flexDirection: 'column',     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F5FCFF',   },   modalViewStyle:{     flex: 1,     flexDirection: 'column',     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F00',   },   himiTextStyle:{     color:'#f00',     fontSize:30,     marginTop:70,   },   }); 

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

importReact, {   AppRegistry,   Component,   View,   Text,   StyleSheet,   TouchableHighlight, } from 'react-native';   importMainfrom "./Main";   exportdefault class SecondPageextends React.Component {  constructor(props) {  super(props);     this.state = {       pageIndex:0     };    }   replaceScene(){     this.setState({pageIndex:1});   }     render() {     switch(this.state.pageIndex) {       case 0:         return (       <Viewstyle={styles.himiViewStyle} >               <Viewstyle={styles.himiViewStyle}>               <TouchableHighlight                 underlayColor='#4169e1'                 onPress={this.replaceScene.bind(this)}                 >                   <Text style={styles.text} >  我是SecondPage,点我切换 </Text>               </TouchableHighlight>             </View>           </View>         )       case 1:           return <Main/>;     }   } };   var styles = StyleSheet.create({     text: {     color:'#f00',     fontSize:20,   },   himiViewStyle:{     flex: 1,     flexDirection: 'column',     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#FF0',   },   himiTextStyle:{     color:'#f00',     fontSize:30,     marginTop:70,   },   }); 

演示效果图:(点击查看动态效果)

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

原文  http://www.himigame.com/react-native/2285.html
正文到此结束
Loading...