RN路由入门

jiezi

5 年前

开始今天的话题之前，让我们先来了解一下前端路由，Ajax 诞生以后，解决了每次用户操作都要向服务器端发起请求重刷整个页面的问题，但随之而来的问题是无法保存 Ajax 操作状态，浏览器的前进后退功能也不可用，当下流行的两种解决方法是：

hash hash 原本的作用是为一个很长的文档页添加锚点信息，它自带不改变 url 刷新页面的功能，所以自然而然被用在记录 Ajax 操作状态中了
history 应该说 history 是主流的解决方案，浏览器的前进后退用的就是这个，它是 window 对象下的，以前的 history 提供的方法只能做页面之间的前进后退如下：

histoy.go(number|URL) 可加载历史列表中的某个具体的页面
history.forward() 可加载历史列表中的下一个 URL
history.back() 可加载历史列表中的前一个 URL

为了让 history 不仅仅能回退到上一个页面，还可以回到上一个操作状态。HTML5 新增了三个方法，其中两个是在 history 对象里的：

history.pushState(state, title, url)
添加一条历史记录，state 用于传递参数，可以为空。title 是设置历史记录的标题，可以为空。url 是历史记录的 URL，不可以为空。
history.replaceState(state, title, url)
将 history 堆栈中当前的记录替换成这里的 url，参数同上。

window.onpopstate() 监听 url 的变化，会忽略 hash 的变化（hash 变化有一个 onhashchange 事件），但是前面的两个事件不会触发它。

总结：

单页面应用或者 Ajax 操作记录状态用的就是 hash 和 h5 增加的 history API，这就是 react-router-dom 扩展的路由实现，也是 web 应用最常用的两种路由

// 引入必要的资源包
import ReactDom from 'react-dom';
import {Router, Route, hashHistory,IndexRoute} from 'react-router';

// 路由页面配置
ReactDom.render(<Router history={hashHistory}>
        <Route path='/' component={Page}></Route>
        <Route path='/NewTask' component={NewTask} />
        <Route path='/Redeem' component={Redeem} />
        <Route path='/Rule' component={Rule} />
    </Router> 
    ,document.getElementById("app"));

当启动 react 项目时，会先生成好一个路由表，发生页面跳转时，react 会根据地址到路由表中找到对应的处理页面或处理方法

而动态路由不是作为一个项目运行的配置文件存储在外部，它在项目 render 的时候才开始定义，router 的作者认为 route 应当和其它普通组件一样，它的作用不是提供路由配置，而是一个普通的 UI 组件

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {StatusBarIOS,Platform} from 'react-native';
import {createMemoryHistory, Router, IndexRoute, Route} from 'react-router';
import {createNavigatorRouter} from 'react-native-navigator-router';


<Provider store={store}>
    <Router history={createMemoryHistory('/')}>
        <Route path='/' component={createNavigatorRouter()}>
            <IndexRoute component={App} />
            <Route path="/about" component={AllRoute} />
        </Route>
    </Router>
</Provider>

因 React Native 版本设计到 0.44 之后，原先的 RN 路由完全失效了

运行直接报错，createMemoryHistory(‘/’) 异常

具体原因还是不太明白，应该是移除了 react-router 的使用方式，目前

首先从原理上，Navigator 是用来作为组件之间的导航器。而缺乏类似 Router 性质的东西时，最简单的办法是将下个组件（也叫场景 Scene），直接告诉导航器。所以就需要在页面的上面引入下个组件

export default class SampleComponent extends React.Component {render() {
            let defaultName = 'FirstPageComponent';// 第一个要展示的组件
            let defaultComponent = FirstPageComponent;
            return (
            <Navigator
              initialRoute={{name: defaultName, component: defaultComponent}}
              configureScene={(route) => {return Navigator.SceneConfigs.VerticalDownSwipeJump;}}
              renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
              }} />
            );
        }
    }

initialRoute={{name: defaultName, component: defaultComponent}}
Navigator 实现跳转，是通过 Push 和 Pop 方法，相当于是一个数组，每要跳到下个 Scene（场景），就把下个页面 push 到这个数组中，当想要后退的时候，再把这个 Pop 出去

react-native 0.44 开始不再支持 Navigatior

NavigatorIOS 使用

首先我们需要给他指定一个路由，这样它才能知道显示哪个页面
和 Navigator 一样 NavigatorIOS 需要有个根视图来完成初始化，所以我们需要先创建一个组件来描述这个界面，并将这个组件通过路由的形式告诉 NavigatorIOS，这样就可以将这个界面展示出来

首先，创建一个 Home 组件，用来作为 NavigatorIOS 的根视图

视图部分：

render() {
        return (<ScrollView style={styles.flex}>
                <View style={styles.container}>
                    <Text onPress={this.goTo.bind(this)}> 点我跳转详情 </Text>
                </View>
            </ScrollView>
        );
    }

样式部分：

const styles = StyleSheet.create({
    flex: {
        flex: 1,
        marginTop: 65
    },
    listItem: {
        height: 40,
        marginLeft: 10,
        marginRight: 10,
        borderBottomWidth: 1,
        borderBottomColor: "#ddd",
        justifyContent: "center"
    },
    listItemFont: {fontSize: 16},
    container: {
        justifyContent: "center",
        alignItems: "center"
    }
});

然后我们实例化一个 NavigatorIOS 并设置路由

class Test extends Component {render() {
        return (
            <NavigatorIOS
                style={{flex: 1}}
                initialRoute={{
                    component: List,// 要跳转的页面
                    title: "列表",// 跳转页面导航栏标题
                    passProps: {}}}
            />
        );
    }
}

return (<View style={styles.container}>
                    <TouchableOpacity
                        onPress={() => {this.props.navigator.push({
                            component:Detail,     // 需要跳转的页面
                            title:'详情'       // 跳转页面导航栏标题
                            rightButtonTitle: "收藏",// 跳转页面导航右侧按钮
                            onRightButtonPress: function() {// 右侧按钮点击回调事件
                                alert("点击了收藏按钮。");
                            }
                        })}}
                    >
                        <Text> 点击跳转页面 </Text>
                    </TouchableOpacity> 
                </View>
            );

由于前面介绍的几种路由方式要么随着 RN 版本更新已不再支持，要么是单平台支持性；RN 官方在 0.44 版本以后把导航路由集中到了 react-navigation 库里面，并且官方也事件使用 react-navigation，少用第三方插件

添加 react-navigation

该库包含三类组件：

StackNavigator：用来跳转页面和传递参数
TabNavigator：类似底部导航栏，用来在同一屏切换不同页面
DrawerNavigator：侧滑菜单导航栏，用于轻松设置带抽屉的屏幕

npm install --save react-navigation

方法引用：

import {StackNavigator} from "react-navigation";

组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数：

StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs：页面路由配置
StackNavigatorConfig：路由参数配置

navigationOptions：配置 StackNavigator 的一些属性。title：标题，如果设置了这个导航栏和标签栏的 title 就会变成一样的，不推荐使用  
    header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为 null  
    headerTitle：设置导航栏标题，推荐  
    headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为 null  
    headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成 "返回"  
    headerRight：设置导航条右侧。可以是按钮或者其他视图控件  
    headerLeft：设置导航条左侧。可以是按钮或者其他视图控件  
    headerStyle：设置导航条的样式。背景色，宽高等  
    headerTitleStyle：设置导航栏文字样式  
    headerBackTitleStyle：设置导航栏‘返回’文字样式  
    headerTintColor：设置导航栏颜色  
    headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于 5.0  
    gesturesEnabled：是否支持滑动返回手势，iOS 默认支持，安卓默认关闭  
   
  
screen：对应界面名称，需要填入 import 之后的页面  
  
mode：定义跳转风格  
  
   card：使用 iOS 和安卓默认的风格  
  
   modal：iOS 独有的使屏幕从底部画出。类似 iOS 的 present 效果  
  
headerMode：返回上级页面时动画效果  
  
   float：iOS 默认的效果  
  
   screen：滑动过程中，整个页面都会返回  
  
   none：无动画  
  
cardStyle：自定义设置跳转效果  
  
   transitionConfig：自定义设置滑动返回的配置  
  
   onTransitionStart：当转换动画即将开始时被调用的功能  
  
   onTransitionEnd：当转换动画完成，将被调用的功能  
  
path：路由中设置的路径的覆盖映射配置  
  
initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件  
  
initialRouteParams：初始路由参数

可以只配置 RouteConfigs 参数
RouteConfigs 参数表示各个页面路由配置，React 开发中的 Router 路由配置，它是让导航器知道需要导航的路由对应的页面

RN 页面路由配置：

const AppIndex = StackNavigator(
    { 
        Task: {
            screen: Task，// 加载首屏需要在 navigationOptions 里面配置首页导航信息
        navigationOptions: ({navigation}) => ({
                headerTitle: "首页",
                headerBackTitle: null
            })
        },
        NewTask: {screen: NewTask},
        Redeem: {screen: Redeem},
        Rule: {screen: Rule}
    }
);

已经配置好导航器以及对应的路由页面了，但是要完成页面之间的跳转，还需要 navigation；

在导航器中的每一个页面，都有 navigation 属性

页面的配置选项 navigationOptions 通常还可以在对应页面中去静态配置，比如在 Redeem 页面中（注意：如果默认是首页的话就不要再页面中声明 static navigationOptions 了）class Redeem extends Component {static navigationOptions = ({ navigation}) => ({headerTitle: `${navigation.state.params.title}`,
        headerRight: (<View style={{ flexDirection: "row"}}>
                <Text
                    style={{color: "#333", marginRight: 13}}
                    onPress={() =>navigation.state.params ? navigation.state.params.jumpToRule() : null
                    }>
                    兑换规则
                </Text>
            </View>
        )
    });
    .....
}
一般子页面 navigationOptions 参数最好都在子页面里面去配置，不要在首页到导航参数里面配置，方便调用本类方法

调用这个方法可以跳转到导航器中的其他页面，此方法有三个参数

routeName 导航器中配置的路由名称
params 传递参数到下一个页面
action action

首先在页面需要跳转的地方声明 navigate

const {navigate} = this.props.navigation;

然后通过点击事件调用 navigate 跳转

// 首页跳转积分兑换页面
<TouchableOpacity
    style={styles.redeem}
    onPress={() => navigate("Redeem", { title: "积分兑换"})}>
    <Text style={styles.redeemText}> 积分兑换 </Text>
</TouchableOpacity>
// 积分兑换页面跳转兑换规则页面
jumpToRule = () => {const { navigate} = this.props.navigation;
        navigate("Rule", { title: "积分兑换规则"});
    }

state 里面包含有传递过来的参数 params、key、路由名称 routeName

{params: { param: 'i am the param'},
    key: 'id-1500546317301-1',
    routeName: 'Redeem'
}

使用：

headerTitle: `${navigation.state.params.title}`

更改当前页面路由的参数，比如可以用来更新头部的按钮或者标题

setParams 的使用：

// 导航右侧按钮 点击调用本来方法
headerRight: (<View style={{ flexDirection: "row"}}>
                <Text
                    style={{color: "#333", marginRight: 13}}
                    onPress={() =>
                        navigation.state.params ? navigation.state.params.jumpToRule() : null}>
                    兑换规则
                </Text>
            </View>
        )

说明：

如果导航栏上的的按钮点击是需要调用本类方法时不能直接 this.jumpToRule()，需要在声明周期的 componentDidMount 中通过 navigation 中的 setParams 把函数注册到导航器中

componentDidMount() {this.props.navigation.setParams({ jumpToRule: this.jumpToRule});
}

可以不传，也可以传参数，还可以传 null

this.props.navigation.goBack(); // 回退到上一个页面

this.props.navigation.goBack(null); // 回退到任意一个页面

this.props.navigation.goBack(‘Home’); // 回退到 Home 页面

dispatch – 发送一个 action

组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数：

TabNavigator(RouteConfigs, TabNavigatorConfig)
RouteConfigs：页面 tab 配置
TabNavigatorConfig：参数配置

screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个 screen 传值和跳转。navigationOptions：配置 TabNavigator 的一些属性  
  
title：标题，会同时设置导航条和标签栏的 title  
  
tabBarVisible：是否隐藏标签栏。默认不隐藏(true)  
  
tabBarIcon：设置标签栏的图标。需要给每个都设置  
  
tabBarLabel：设置标签栏的 title。推荐  
  
导航栏配置  
  
tabBarPosition：设置 tabbar 的位置，iOS 默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）swipeEnabled：是否允许在标签之间进行滑动  
  
animationEnabled：是否在更改标签时显示动画  
  
lazy：是否根据需要懒惰呈现标签，而不是提前，意思是在 app 打开的时候将底部标签栏全部加载，默认 false, 推荐为 true  
  
trueinitialRouteName：设置默认的页面组件  
  
backBehavior：按 back 键是否跳转到第一个 Tab(首页)，none 为不跳转  
  
tabBarOptions：配置标签栏的一些属性 iOS 属性  
  
activeTintColor：label 和 icon 的前景色 活跃状态下  
  
activeBackgroundColor：label 和 icon 的背景色 活跃状态下  
  
inactiveTintColor：label 和 icon 的前景色 不活跃状态下  
  
inactiveBackgroundColor：label 和 icon 的背景色 不活跃状态下  
  
showLabel：是否显示 label，默认开启 style：tabbar 的样式  
  
labelStyle：label 的样式安卓属性  
  
activeTintColor：label 和 icon 的前景色 活跃状态下  
  
inactiveTintColor：label 和 icon 的前景色 不活跃状态下  
  
showIcon：是否显示图标，默认关闭  
  
showLabel：是否显示 label，默认开启 style：tabbar 的样式  
  
labelStyle：label 的样式 upperCaseLabel：是否使标签大写，默认为 true  
  
pressColor：material 涟漪效果的颜色（安卓版本需要大于 5.0）pressOpacity：按压标签的透明度变化（安卓版本需要小于 5.0）scrollEnabled：是否启用可滚动选项卡 tabStyle：tab 的样式  
  
indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将 height 设置为 0 来暂时解决这个问题  
  
labelStyle：label 的样式  
  
iconStyle：图标样式

导入必要组件：

import {TabNavigator} from "react-navigation";
import Home from "./category/Home";
import Feedback from "./category/feedback/feedback";

定义 TabNavigator：

const MyTab = TabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({navigation}) => ({
                headerTitle: "首页",
                tabBarLabel: "首页",
                headerBackTitle: null
            })
        },
        Feed: {
            screen: Feedback,
            navigationOptions: ({navigation}) => ({
                headerTitle: "意见反馈",
                tabBarLabel: "我的",
                headerBackTitle: null,
            })
        }
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: "bottom", // 设置 tabbar 的位置，iOS 默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）swipeEnabled: true, // 是否允许在标签之间滑动
        animationEnabled: false, // 是否在更改标签时显示动画
        lazy: true, // 是否根据需要懒惰呈现标签，而不是提前制作，意思是在 app 打开的时候将底部标签栏全部加载，默认 false, 推荐改成 true
        tabBarOptions: {
            activeTintColor: "#ff552e", //label 和 icon 的前景色 活跃状态下（选中）// activeBackgroundColor:'blue',//label 和 icon 的背景色 活跃状态下
            inactiveTintColor: "#333", //label 和 icon 的前景色 不活跃状态下
            showLabel: true, // 是否显示 label，默认开启
            showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
            style: {backgroundColor: "#ffffff"}, //tabbar 的样式
            labelStyle: {fontSize: 14 // 文字大小}
        }
    }
);

const MyTab = TabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: ({navigation}) => ({
                headerTitle: "首页",
                tabBarLabel: "首页",
                headerBackTitle: null,
                tabBarIcon: ({tintColor}) => (
                    <Image
                        style={styles.imageStyle}
                        source={
                            tintColor == "#ff552e"
                                ? require("./img/yingxiao/ac-jingxuan.png")
                                : require("./img/yingxiao/jingxuan.png")
                        }
                    />
                )
            })
        },
        Feed: {
            screen: Feedback,
            navigationOptions: ({navigation}) => ({
                headerTitle: "意见反馈",
                tabBarLabel: "我的",
                headerBackTitle: null,
                headerRight: (
                    <Text
                        style={{color: "#333", marginRight: 14, fontSize: 16}}
                        onPress={() =>
                            navigation.state.params ? navigation.state.params.submit() : null}>
                        提交
                    </Text>
                ),
                tabBarIcon: ({tintColor}) => (
                    <Image
                        style={styles.imageStyle}
                        source={
                            tintColor == "#ff552e"
                                ? require("./img/yingxiao/ac-laidiantong.png")
                                : require("./img/yingxiao/laidiantong.png")
                        }
                    />
                )
            })
        }
    },
    {
        tabBarComponent: TabBarBottom,
        tabBarPosition: "bottom", // 设置 tabbar 的位置，iOS 默认在底部，安卓默认在顶部。（属性值：'top'，'bottom'）swipeEnabled: true, // 是否允许在标签之间滑动
        animationEnabled: false, // 是否在更改标签时显示动画
        lazy: true, // 是否根据需要懒惰呈现标签，而不是提前制作，意思是在 app 打开的时候将底部标签栏全部加载，默认 false, 推荐改成 true
        tabBarOptions: {
            activeTintColor: "#ff552e", //label 和 icon 的前景色 活跃状态下（选中）// activeBackgroundColor:'blue',//label 和 icon 的背景色 活跃状态下
            inactiveTintColor: "#333", //label 和 icon 的前景色 不活跃状态下
            showLabel: true, // 是否显示 label，默认开启
            showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
            style: {backgroundColor: "#ffffff"}, //tabbar 的样式
            labelStyle: {fontSize: 14 // 文字大小}
        }
    }
);
const AppIndex = StackNavigator(
    {
        Main: {screen: MyTab},
        Task: {screen: Task},
        NewTask: {screen: NewTask},
        Redeem: {screen: Redeem},
        Rule: {screen: Rule},
        Test: {screen: Test}
    },
    {
        initialRouteName: "Task", // 默认显示界面
        navigationOptions: {
            headerTitle: "每日任务",
            headerBackTitle: null,
            // headerBackTitle: "返回",
            headerTintColor: "#333",
            cardStack: {gesturesEnabled: true // 是否允许右滑返回，在 iOS 上默认为 true，在 Android 上默认为 false}
        },
        // mode: "card", // 页面切换模式, 左右是 card(相当于 iOS 中的 push 效果), 上下是 modal(相当于 iOS 中的 modal 效果)
        headerMode: "screen", // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
        onTransitionStart: () => {}, // 回调
        onTransitionEnd: () => {} // 回调
    }
);

RN路由入门

前端路由

1.1、前言

1.2、history 前进后退方法

1.3、H5 新增方法

1.4、window 下新增方法

1.5、react 路由

静态路由

动态路由

React Native 路由

2.1、RN 中尝试 react-router 的使用

2.2、RN Navigator

2.3、iOS NavigatorIOS

1、根视图

2、实例化路由设置

3、效果

4、跳转和返回

5、整体效果

react-navigation

3.0、引言

3.1、StackNavigator

3.1.1、StackNavigator 参数

3.1.2、RouteConfigs 配置

3.1.3、路由跳转

3.1.4、navigation 属性

navigate – 跳转到其他页面

state – 当前页面导航器的状态

setParams – 更改路由的参数

goBack – 返回回退

3.2、TabNavigator

3.2.1、参数配置

3.3、页面导航和页面切换混合使用