React Native学习笔记(七)-页面跳转、传值、回传

React Native页面跳转、传值、回传

Navigator --- 在React Native中的不同页面我们称之为场景(Scene),而Navigator页面跳转、传参的介质。它通过不同的路由对象来切换不同的场景,从而进行页面的渲染。

  • 初始化路由

      initialRoute = {
          name: 'login',
          component: Login,
      }; 
    

name为页面的名字,component为导入的组件

  • 设置页面的跳转方式

      configureScene = (route) => {
          return Navigator.SceneConfigs.FloatFromRight;
      };
    
  • 场景渲染

      renderScene = (route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator={navigator}/>
      };
    

若是第一次调用route的值为initialRoute的路由,而当我们拿到Login(例子中的Component)的时候,就把navigator对象传递给它,这样在Login页面中就可以使用navigator对象。navitator本质是一个管理所有界面对象的栈,所以通过push()、pop()方法可以控制栈的进出。

使用示例
  1. 在index.ios.js中设置初始路由

     import React, {Component} from 'react';
     
     import {
         AppRegistry,
         Navigator
     } from 'react-native';
     
     import Login from './lifeStyle/login/Login'
     
     export default class lifeStyle extends Component {
         initialRoute = {
             name: 'login',
             component: Login,
         };
     
         configureScene = (route) => {
             return Navigator.SceneConfigs.FloatFromRight;
         };
     
         //第一次调用的时候,第一个参数route就是initialRoute
         renderScene = (route, navigator) => {
             let Component = route.component;
             return <Component {...route.params} navigator={navigator}/>
         };
     
         render() {
             return (
                 <Navigator
                     initialRoute={this.initialRoute}
                     renderScene={this.renderScene}
                     configureScene={this.configureScene}/>
             );
         }
     }
     
     AppRegistry.registerComponent('lifeStyle', () => lifeStyle);
    
  2. 在Login.js页面进行页面的跳转和传参

     import React, {Component} from 'react';
     import {
         StyleSheet,
         View,
         Text,
         Image,
         ScrollView,
         TextInput,
         ToastAndroid,
         TouchableOpacity
     } from 'react-native';
     
     import Global from '../utils/Global';
     import NetUtil from '../utils/NetUtil';
     import JsonUtil from '../utils/JsonUtil';
     import Util from '../utils/Util';
     import StorageUtil from '../utils/StorageUtil';
     
     import LifeStyle from '../App';
     import Register from '../login/Register';
     import ResetPwd from '../login/ResetPwd';
     import TextButton from '../component/TextButton';
     import LoadingView from '../component/LoadingView';
     
     class Login extends Component {
         constructor(props) {
             super(props);
             this.state = {
                 username: '',
                 password: '',
                 email: '',
                 showLoading: false
             }
         }       
         render() {
             return (
                 <View style={styles.container}>
                     <TextButton
                         text={'忘记密码'}
                         onPress={() => this._resetPwd()}
                         color={'#FFDE00'}
                         backgroundColor={'transparent'}/>
    
                     <TextButton
                         style={styles.register}
                         text={'用户注册'}
                         onPress={() => this._register()}
                         color={'#FFDE00'}
                         backgroundColor={'transparent'}/>
                 </View>
             )
         }
         _register = () => {
             this.props.navigator.push({
                 name: 'register',
                 component: Register,
                 params: {
                     name: 'ibinbin'
                 }
             });
         };
         _resetPwd = () => {
             this.props.navigator.push({
                 name: 'resetPwd',
                 component: ResetPwd,
             });
         }
     }
     const styles = StyleSheet.create({
         container: {
             flex: 1,
             backgroundColor: '#f5f5f5'
         },
         reset_pwd: {
             fontSize: 14,
             color: '#FFDE00',
             backgroundColor: 'white'
         },
         register: {
             fontSize: 14,
             color: '#FFDE00',
             textAlign: 'right',
         }
     });
     
     export default Login;
    

    我们在_register()中使用navigator进行页面的跳转并传递了参数。

  3. 在register.js中返回到Login.js页面

     import React, {Component} from 'react';
     import {
         StyleSheet,
         View,
         Text,
         Image,
         TextInput,
         TouchableOpacity
     } from 'react-native';
     import TextButton from "../component/TextButton";
     import Global from '../utils/Global';
     import NetUtil from '../utils/NetUtil';
     import JsonUtil from '../utils/JsonUtil';
     import Util from '../utils/Util';
     import Header from '../component/Header';
     
     class Register extends Component {
     
         constructor(props) {
             super(props);
             this.state = {
                 username: '',
                 password: ''
             };
         }
     
         componentDidMount() {
             this.setState({
                 name: this.props.name
             })
         }
     
         render() {
             return (
                 <View style={styles.container}>
                     <TouchableOpacity>
                         <TextButton
                             text="注册"
                             onPress={() => this._register()}
                             color={'black'}
                             backgroundColor={'#FFDE00'}/>
                     </TouchableOpacity>
                 </View>
             )
         }
         _goBack = () => {
             const {navigator} = this.props;
             if (navigator) {
                 navigator.pop();
             }
         }
     }
     
     const styles = StyleSheet.create({
         container: {
             flex: 1,
             backgroundColor: '#f5f5f5'
         },
         register: {
             marginTop: 20,
             marginLeft: 20,
             marginRight: 20,
             backgroundColor: '#FFDE00',
             height: 35,
             borderRadius: 5,
             justifyContent: 'center',
             alignItems: 'center',
         },
     });
     
     export default Register;
    

    在componentDidMount()我们通过this.props.name接收了从Login页面传递过来的name。并在_goBack()设置了页面的返回。

如果我们需要把值回传过去呢???
  • Login.js中写个回调函数

      _register = () => {
          this.props.navigator.push({
              name: 'register',
              component: Register,
              params: {
                  name: 'ibinbin',
                  getMyName: (myName) => {
                          this.setState({
                              name: myName
                          })
                  }
              }
          });
      };
    
  • 在Register.js中设置值

      _goBack = () => {
          const {navigator} = this.props;
          this.props. getMyName(name);
          if (navigator) {
              navigator.pop();
          }
      }
    
好了到这里关于页面的跳转、传值、回传已经讲解完毕。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 106,498评论 12 127
  • 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人...
    珍此良辰阅读 6,649评论 34 16
  • ANavigator稍微复杂点的移动应用都会有页面跳转的场景,即用户在页面A上点击某个功能,比如查看内容详情或者帮...
    conf1234阅读 1,051评论 0 3
  • 公司打算用react-native开发APP,初始RN遇到了很多坑,搭建了一个小的项目框架,结合redux根据公司...
    庄子黑黑阅读 373评论 0 5
  • 我有一个梦 向往军营身着迷彩 手握钢枪保国守家 马革裹尸征战疆场 我有一个梦 和心仪已久的姑娘 执子之手与子偕老 ...
    似冰的梦阅读 66评论 2 1