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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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:

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 是入口显示的主要视图

import React, {
  AppRegistry,
  Component,
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Modal,
} from ‘react-native‘;
 
 
import SecondPage from "./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 (
               <View style={styles.container} >
 
                 <Text style={styles.himiTextStyle}>Himi React Native 教程</Text>
                 <View style={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 (
                 <View style={styles.container} >
                   <Modal
                     animated={this.state.animationType}
                     transparent={this.state.transparent}
                     visible={this.state.modalVisible}
                     onRequestClose={() => {this._setModalVisible(false)}}
                     >
                       <View style={styles.modalViewStyle}>
                         <TouchableHighlight
                           underlayColor=‘#4169e1‘
                           onPress={this._setModalVisible.bind(this, false)}
                           >
                             <Text style={styles.text} >  我是Modal,点击将隐藏 </Text>
                         </TouchableHighlight>
                      </View>
                   </Modal>
 
                   <Text style={styles.himiTextStyle}>Himi React Native 教程</Text>
                   <View style={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 是用来展示第一种逻辑切页用的

import React, {
  AppRegistry,
  Component,
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
} from ‘react-native‘;
 
import Main from "./Main";
 
export default class SecondPage extends React.Component {
 constructor(props) {
 super(props);
    this.state = {
      pageIndex:0
    };
 
 }
  replaceScene(){
    this.setState({pageIndex:1});
  }
 
  render() {
    switch(this.state.pageIndex) {
      case 0:
        return (
       <View style={styles.himiViewStyle} >
 
            <View style={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,
  },
 
});

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

技术分享


本文出自 “李华明Himi” 博客,请务必保留此出处http://xiaominghimi.blog.51cto.com/2614927/1785436

以上是关于REACT NATIVE 系列教程之八不使用NAVIGATOR实现切换(页面)场景的两种形式(逻辑与MODAL)的主要内容,如果未能解决你的问题,请参考以下文章

REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)

REACT NATIVE 系列教程之五NAVIGATOR(页面导航)的基本使用与传参

稀饭react native 实战系列教程之影片数据获取并解析

REACT NATIVE 系列教程之二创建自定义组件&&导入与使用示例

REACT NATIVE 系列教程之五NAVIGATOR(页面导航)的基本使用与传参