混合开发的大趋势之一React Native之页面跳转

Posted 2020-08-16 王亟亟

转载请注明出处：王亟亟的大牛之路

最近事情有点多，没有长时间地连贯学习，文章也停了一个多礼拜，愧疚，有时间还是继续学习，继续写！

还是先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android （最近还是保持日更，除非忙的起飞活着出去玩不然都是更的，不信你看）

---

废话不多，贴下运行效果

登陆前

登录成功后

部分代码借鉴：https://github.com/SpikeKing/WclNavigator

---

rn的页面跳转都是交由Navigator来处理，我们看下文档了解这个常用的组件Navigator

Navigator 实质上是调用的Native的任务栈通过一系列路由做推送跳转等逻辑的，所以调的还是源生内容。

他有非常多实用的回调函数，注入renderScene configureScene 等等等

Navigator正常运行需要以下几个步骤

1.初始化路由 —>initialRoute
2.配置跳转动画 —>configureScene
3.渲染场景 —>renderScene

代码是最好的注解，我们直接边看代码边解释，先是index.android.js

为了让逻辑更清晰我们把之前登录的代码 放到了login.android.js
index页面专心做”配置”

import React,{Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity
} from 'react-native';
import Button from 'react-native-button'
import Login from './pages/login.android';

export default class WjjPro extends Component {
  /**
   * 使用动态页面加载
   * @param route 路由
   * @param navigator 导航器
   * @returns {XML} 页面
   */
  renderScene(route, navigator) {
    return <route.component navigator={navigator}  {...route.passProps} />;
  }

  /**
   * 配置场景动画
   * @param route 路由
   * @param routeStack 路由栈
   * @returns {*} 动画
   */
  configureScene(route, routeStack) {
    if (route.type == 'Bottom') {
      return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
    }
    return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
  }

  render() {
    return (
      <Navigator
        style={{flex:1}}
        initialRoute={{component: Login}}
        configureScene={this.configureScene}
        renderScene={this.renderScene}/>
    );
  }
}

const styles = StyleSheet.create({
});

AppRegistry.registerComponent('WjjPro', () => WjjPro);

因为我们首页实质上不做展示而是直接跳转到login页面，所以我们先配置Navigator，初始化各个函数，然后推给Login这个我们在开始就定义的”组件”，这部分如何实现跳转的可以看知识传送门，写得很详细，我没必要再画蛇添足了

ndex其实就是做了一堆配置然后就传递给login了，但是他做了一个很重要的行为，构造了Navigator属性，然后后续的页面进行传递

---

登录页面

登录页面和上一个例子里的代码没什么区别，主要差异就是再判断表单之后进行跳转页面，代码如下

name是我们我们要跳转页面传给下一个页面的参数

它可以在 this.props.name得到我们login页面传递过去的值

type是我们跳转的动画效果，对应的找Navigator的configureScene方法

文件头也要申明我们下一个被跳转的组件

import Main from './main.android';

    _jump(name, type = 'Normal') {
        this.props.navigator.push({
          component: Main,
          passProps: {
            name: name
          },
          type: type
        })
      }

push类似于 我们平时的startActivity的行为，API介绍可以看http://facebook.github.io/react-native/docs/navigator.html

---

登陆成功了那就跳到了我们的首页

import React, {Component,Navigator} from 'react';
import {AppRegistry, View, StyleSheet, Text,} from 'react-native';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
        }
    }

    componentDidMount() {
        this.setState({name: this.props.name});
    }
    render() {
        return (
            <View>
                <Text>获得的参数: value = {this.state.name}</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent('Main', () => Main);

我们在首页的componentDidMount方法里把传来的参数给Main页面的name字段赋值，然后呈现在Text上就行了

总结：

这是个很强大的控件，可用于页面跳转。

要是用只需要
1.构造Navigator
2.配置Navigator结合业务逻辑
3.调用push，jump等方法进行跳转

源码地址：https://github.com/ddwhan0123/ReactNativeDemo