React Native自定义路由管理的深入理解

目录
  • 1、自定义路由
  • 2、Tab导航
  • 3、数据回传
  • 总结

1、自定义路由

众所周知,不管是在原生Android还是iOS,它们都有一个默认的路由路由栈管理类。由于React Native官方没有提供路由管理的组件,所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由。

Stack.Navigator使用的命名路由,所谓命名路由,指的是路由需要先声明然后才能使用。为了方便管理路由页面,我们会将路由放到一个统一的位置,比如screens包下,如下所示。

然后,我们在项目的screens/index.js文件中新建一个常量,主要用来管理声明的路由,如下所示。

export const stacks = [
  {
    name: 'AllMovieScreen',
    component: AllMovieScreen,
    options: {headerShown: false},
  },
  {
    name: 'CitySelectScreen',
    component: CitySelectScreen,
    options: {title: '选择城市'},
  },
  …. //省略其他路由页面
];

然后,我们再新建一个MainStackScreen.js文件,用来实现路由的跳转、返回等操作。同时,MainStackScreen类的另一个作用是统一导航栏的样式,代码如下所示。

onst MainStack = createStackNavigator();

function MainStackScreen({navigation}) {
  return (
    <MainStack.Navigator
      initialRouteName="App"
      screenOptions={{
        headerTitleAlign: 'center',
        headerStyle: {
          shadowOffset: {width: 0, height: 0},
          shadowColor: '#E5E5E5',
          backgroundColor: '#fff',
        },
        gestureEnabled: true,
        headerBackTitleVisible: false,
        headerLeft: () => (
          <TouchableOpacity
            onPress={() => navigation.goBack()}
            style={{padding: 10, paddingRight: 30}}>
            <Icon name="chevron-thin-left" size={20} color="#222222" />
          </TouchableOpacity>),
      }}>
      <MainStack.Screen
        name="App"
        component={BottomTab}
        options={{headerShown: false}}/>
      {stacks.map((item, index) => (
        <MainStack.Screen
          key={index.toString()}
          name={item.name}
          component={item.component}
          options={item.options}/>
      ))}
    </MainStack.Navigator>
  );
}

export default MainStackScreen;

在上面的代码,我们创建了一个creens/index.js文件来申明应用的路由,然后在MainStackScreen 类中使用map循环完成路由的注册。可以看到,经过上面的处理后,路由管理是非常清晰的,当有新的页面时只需要往creens/index.js文件中添加路由即可。

2、Tab导航

在React Native应用开发中,react-navigation除了提供路由管理功能外,还支持Tab导航和Drawer导航。并且,在最新的版本中,Tab导航、Drawer导航和Stack导航所依赖的库是分开的,所以在开发过程中需要单独安装。

对于Tab导航来说,需要在项目中安装Tab导航需要的bottom-tabs库,命令如下。

npm install @react-navigation/bottom-tabs

创建Tab导航时需要用到createBottomTabNavigator()方法,它需要提供导航器和路由两个属性,分别对应Tab.Navigator和Tab.Screen两个组件,最后还需要使用NavigationContainer组件包裹它们,如下所示。

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';

const BottomTabs = createBottomTabNavigator();

export default function BottomTabScreen() {
  return (
    <NavigationContainer>
      <BottomTabs.Navigator
        initialRouteName="Home"
        screenOptions={({route}) => ({
          tabBarIcon: ({focused}) => {
            return (
              <Image source={ focused? tabImage[`${route.name}_active`]
                    : tabImage[route.name]
                }
                style={{width: 26, height: 26}}/>
            ); }})}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
          style: {
            backgroundColor: '#fff',
          },
        }}>
        <BottomTabs.Screen
          name="Home"
          component={HomeScreen}
          options={{
            tabBarLabel: '电影',
          }}/>

…. //省略其他代码

        <BottomTabs.Screen
          name="Mine"
          component={MineScreen}
          options={{
            tabBarLabel: '我的',
          }}/>
      </BottomTabs.Navigator>
    </NavigationContainer>
  );
}

同时,bottom-tabs插件还提供了很多其他有用的组件和属性,开发者可以根据需要进行选择。运行上面的代码,效果下图所示。

3、数据回传

有时候,我们有这样一种需求:跳转到下一个页面,并在下一个页面选择了数据后进行回传。比如:

在上面的场景中,我们需要对活动列表进行筛选,那么在跳转到活动筛选页面后,需要回传选中的活动类型,对于这种场景,我们需要对react-navigation进行怎样的处理呢?

首先,我们在screens/index.js文件中注册活动类型页面,如下所示。

{
  name: 'SelectorScreen',
  component: SelectorScreen,
  options: nav => {
    const {route} = nav;
    const {params = {}} = route;
    const {title = '活动类型', onRightPress = () => {}} = params;
    return {
       title,
       headerRight: () => (
         <TouchableOpacity
            onPress={onRightPress}
            style={styles.button}>
            <Text style={{color: '#fff', fontSize: 14}}>确定</Text>
         </TouchableOpacity>
        ),
      };
    },
  }

同时,活动筛选页面的数据是由活动列表页面传递过来的。所以在使用的时候,只需要使用上文封装好的路由工具执行跳转操作即可,代码如下。

navigate('SelectorScreen', {
      values: categories.map(c => c.andGroupName),
      defaultValues: categoryName,
      onConfirm: changeCategory,
    });

可以看到,为了获取筛选页面选择的数据,我们在跳转的时候定义了一个onConfirm回调函数。接着,我们在新建的活动筛选页面接收上一个页面传递过来的活动数据并使用列表展示出来即可,如下所示。

function SelectorScreen({navigation, route}) {
  const {values = [], defaultValues = [], onConfirm} =route.params || {};
  const [selected, setSelected] = useState(defaultValues);

  const _onRightPress = () => {
    onConfirm(selected);
    navigation.goBack();
  };

  useEffect(() => {
    navigation.setParams({onRightPress: _onRightPress});
  }, [selected]);

  const onPressItem = val => {
    let arr = [];
arr = [val];
setSelected(arr);
  };

  const renderItem = ({item}) => {
    const renderRight = () => {
    const isSelected = selected.includes(item);
    return (
      <ListItem
        text={item}
        renderRight={renderRight}
        onPress={() => onPressItem(item)} />
    );
  };

  return (
    <View style={styles.bg}>
      <FlatList
        keyExtractor={(item, index) => item + index}
        data={values}
        renderItem={renderItem}
        ListFooterComponent={<View height={120} />} />
    </View>
  );
};

const styles = StyleSheet.create({
 …. //省略样式代码
});

export default SelectorScreen;

选择完活动类型之后,如何将选择的结果返回给上一个页面呢。此时就用到了前文定义的onConfirm回调函数,如下所示。

const {values = [], defaultValues = [], onConfirm} =route.params || {};

const _onRightPress = () => {
    onConfirm(selected);        //onConfirm回调函数回传数据
    navigation.goBack();
 };

总结

到此这篇关于React Native自定义路由管理的文章就介绍到这了,更多相关React Native自定义路由管理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React Native 启动流程详细解析

    导读:本文以 react-native-cli 创建的示例工程(安卓部分)为例,分析 React Native 的启动流程. 工程创建步骤可以参考官网.本文所分析 React Native 版本为 v0.64.2. 我们知道上述工程是一个安卓应用,打开 android/ 目录下源码文件,首先发现它创建了两个 java 文件:MainApplication.java 和 MainActivity.java,分别做了应用以及主 Activity 的定义. 安卓应用的启动流程是:在启动第一个 acti

  • 简析React Native startReactApplication 方法

    在 React Native 启动流程简析这篇文章里,我们梳理了 RN 的启动流程,最后的 startReactApplication 由于相对复杂且涉及到最终执行前端 js 的流程,我们单独将其提取出来,独立成文加以分析. 首先来看 startReactApplication 的调用之处: mReactRootView.startReactApplication( getReactNativeHost().getReactInstanceManager(), appKey, mLaunchOp

  • react native之ScrollView下拉刷新效果

    本文实例为大家分享了react native之ScrollView下拉刷新效果的具体代码,供大家参考,具体内容如下 ScrollView的refreshControl属性用于下拉刷新,只能用于垂直视图,即horizontal不能为true. 1.创建自定义CKRefresh.js刷新组件 import React,{Component} from 'react'; import { View, Text, StyleSheet, ScrollView, RefreshControl, Dimen

  • React Native项目中使用Lottie动画的方法

    Lottie是Airbnb开源的一个面向iOS.Android.React Native的动画库,能加载Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样使用这些动画,完美实现炫酷的动画效果. 使用流程上,Lottie动画需要先使用Adobe After Effects做出原动画,然后再使用官方提供的Bodymovin插件把动画导出成Json文件,而这个Json文件就是Lottie需要解析的动画源文件. 在React Native项目中使用Lottie动画,需

  • React Native自定义路由管理的深入理解

    目录 1.自定义路由 2.Tab导航 3.数据回传 总结 1.自定义路由 众所周知,不管是在原生Android还是iOS,它们都有一个默认的路由路由栈管理类.由于React Native官方没有提供路由管理的组件,所以我们需要使用react-navigation插件提供的Stack.Navigator组件来管理路由. Stack.Navigator使用的命名路由,所谓命名路由,指的是路由需要先声明然后才能使用.为了方便管理路由页面,我们会将路由放到一个统一的位置,比如screens包下,如下所示

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • React Native自定义Android的SSL证书链校验

    目录 前言 HTTPS请求 WebSocket 前言 虽然这次分享的内容解决了本人的实际开发需求,但由于不是专职的Android开发工程师,涉及到的Android相关内容可能会存在错误或者写法不合理,仅供参考,请多多指教. 本文示例基于: React Native - 0.67.3 Android - 10+ 不包括iOS 由于业务原因,需要在生产环境里面使用自签发证书,那自然这个证书是无法通过Android证书链验证的,为此需要自定义校验规则. 本文分为两部分,介绍了对HTTPS请求和WebS

  • React Native 自定义下拉刷新上拉加载的列表的示例

    在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图.通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的. 本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了. 下拉刷新的实现十分简单,这里我们沿用FlatList本身的

  • React Native自定义组件与输出方法详解

    简介 如果你看的这一篇,需要你对ReactNative的开发有一定的了解,此文讲的是在ReactNative提供的组件不能满足需求,或者native用于较成熟的组件想要输出,那么就需要用到自定义组件了. 通过该文,我们也可以对native和JS交互方式进行初步了解,关于输出方法内部实现,我们下一篇再剖. Native module native module就是实现了RCTBridgeModule协议的OC类.RCT就是ReaCT的缩写. 具体步骤如下 引入#import <React/RCTB

  • 详解React Native中如何使用自定义的引用路径

    目录 RN的相对路径地狱 RN的自定义路径需要的依赖 解决自定义引用路径导致的eslint报错问题 RN的相对路径地狱 我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了.伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方

  • React Native之prop-types进行属性确认详解

    属性确认的作用 使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误. 因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性.这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性. React Native已经升级到0.51.0了,版本升级很快,但是对老

  • React Native 中添加自定义字体的方法

    目录 添加字体 定义 assets 目录 执行 link 命令 在样式中使用字体 示例 在 React Native 中,如何添加自定义字体呢?React Native 提供了便捷的命令行工具来帮助我们. 添加字体 在项目根目录下创建 assets/fonts 文件夹,把字体文件放到这个文件夹下. 如图: 定义 assets 目录 在项目根目录下创建 react-native.config.js 文件,编辑其中内容,留意第 6 行,这和我们自定义字体文件所在目录一致. module.export

  • React Native学习教程之自定义NavigationBar详解

    前言 在刚开始学习React Native的时候,版本还是0.20,问题一大堆,Navigation这个问题更是很多,首先,是NavigationBar的问题,NavigationIOS有NavigationBar,Navigation却需要自定义一个,最后,我想了想,还是自定义一个view,岂不更好,现在新公司不用RN,我正好有点时间,就把自定义的NavigationBar分享给大家.好了少废话,上代码: 示例代码 // NavigationBar 导航条的自定义封装 // create by

  • React路由管理之React Router总结

    React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查. React Router是做什么的呢,官方的介绍是: A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dy

随机推荐