react-native路由之react-navigation(一)

最新推荐文章于 2024-09-10 05:36:05 发布
最新推荐文章于 2024-09-10 05:36:05 发布
阅读量7.1k 收藏 6
点赞数 1
分类专栏： React Native 文章标签： react react-navigation js react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hope93/article/details/90411359
版权

安装

在react-native项目目录下，安装react-navigation包

npm install --save react-navigation

然后再安装react-native-gesture-handler包

npm install --save react-native-gesture-handler

link所有原生依赖

react-native link react-native-gesture-handler

react-native-gesture-handler在 Android 上的安装，还需要手动修改 MainActivity.java （./android/app/src/main/java/com/newpro）文件

package com.reactnavigation.newpro;

import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

  @Override
  protected String getMainComponentName() {
    return "newpro";
  }

+  @Override
+  protected ReactActivityDelegate createReactActivityDelegate() {
+    return new ReactActivityDelegate(this, getMainComponentName()) {
+      @Override
+      protected ReactRootView createRootView() {
+       return new RNGestureHandlerEnabledRootView(MainActivity.this);
+      }
+    };
+  }
}

创建createStackNavigator

createStackNavigator是一个返回 React 组件的方法。 它需要 a route configuration object（一个路由配置对象） 和 an options object（一个可选对象） (现在我们忽略下面的内容). 由于 createStackNavigator 函数会返回一个React组件，因此我们可以直接从 App.js 中导出它以用作我们应用程序的根组件。

只有唯一一个路由配置：

如果只有唯一一个路由，则直接对Home进行赋值{ Home: HomeScreen }

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
class HomeScreen extends React.Component {
  render() {
    return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
       <Text>Home Screen</Text>
    </View>
    );
    }
}
const AppNavigator = createStackNavigator({ Home: HomeScreen });
export default createAppContainer(AppNavigator);

多个路由配置：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            this.props.navigation.dispatch(StackActions.reset({
              index: 0,
              actions: [
                NavigationActions.navigate({ routeName: 'Details' })
              ],
            }))
          }}
        />
      </View>
    );
  }  
}

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }  
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
}, {
    initialRouteName: 'Home',
});

export default createAppContainer(AppNavigator);

页面跳转

情况1：navigate

this.props.navigation.navigate('Details')

如果重复多次跳到这个页面，这个页面是不会发生变化的，因为这里已经有这个路由了，你再去访问相同的路由，是不会有任何变化的

情况2：push

 this.props.navigation.push('Details')

如果是直接push的话，就不会去考虑原先有没有这个路由，都是直接再次添加一个新的路由进去的

情况3：返回

返回上一个页面

this.props.navigation.goBack();

或：

this.props.navigation.pop();

返回到堆栈中的第一个页面

 this.props.navigation.popToTop()

传递参数给路由

A跳转到B

A页面点击事件：

  this.props.navigation.push('Details', {
     testId: 123
 })

B页面获取A中带入的参数：

  <Text>{this.props.navigation.getParam('testId')}</Text>

或:

<Text>{this.props.navigation.state.params.testId}</Text>

改变传到B页面的参数：

    this.props.navigation.setParams({
        testId: '321'
   })

配置标题栏

调整标题样式

标题样式有三个关键属性：headerStyle、headerTintColor和headerTitleStyle

  • headerStyle： 标题栏最外层的View样式，一般用来设置标题栏背景颜色
  • headerTintColor： 返回按钮和标题文字颜色
  • headerTitleStyle： 为标题定制fontFamily，fontWeight和其他Text样式属性，我们可以用它来完成。
 static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: 'white',
    headerTintStyle: {
      fontWeight: 'bold',
    }
  };

公用标题栏样式

在APP.js中添加defaultNavigationOptions属性，如下：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation'; // Version can be specified in package.json

import HomeScreen from './Router/HomeScreen'
import DetailsScreen from './Router/DetailsScreen'
import News from './Router/News'

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
  News:{
    screen: News
  }
}, {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: 'green',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold',
        },
    }
});

export default createAppContainer(AppNavigator);

这样，所有导航栏样式都公用了， 如果要改变个别导航栏样式，可以在当前页面修改

有时候，你可能需要获取上一个页面带来的参数，那么标题导航可以：

  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
    return {
      title: params.testId+'news'
    };
  };

改变左侧返回按钮

     headerLeft: (<Text
        onPress={()=>{
          navigation.goBack();
        }}
        style={{color: 'white', paddingLeft: 10}}
        >
        返回
      </Text>)

如果要改变返回按钮的图片，则需添加headerBackImage属性

添加右侧按钮

    headerRight: (<Text
        onPress={()=>{
          navigation.setParams({testId: '改变的新内容'})
        }}
        style={{color: 'white', marginRight: 10}}>
        改变参数
      </Text>)

整合如下：

 static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
    return {
      title: params.testId+'news',
      headerLeft: (<Text
        onPress={()=>{
          navigation.goBack();
        }}
        style={{color: 'white', paddingLeft: 10}}
        >
        返回
      </Text>),
      headerRight: (<Text
        onPress={()=>{
          navigation.setParams({testId: '改变的新内容'})
        }}
        style={{color: 'white', marginRight: 10}}>
        改变参数
      </Text>)
    };
  };

有时候，我们的右侧按钮是要改变当前页面的state值，但是这里我们并不能直接访问到页面的state值，这里我们可以利用setParams和getParam来处理，如下：

import React from 'react';
import { View, Text, Button } from 'react-native';


class DetailsScreen extends React.Component {

  state = {
    count: 0
  }

  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;
    return {
      title: params.testId+'news',
      headerLeft: (<Text
        onPress={()=>{
          navigation.goBack();
        }}
        style={{color: 'white', paddingLeft: 10}}
        >
        返回
      </Text>),
      headerRight: (<Text
        onPress={navigation.getParam('getCount')}
        style={{color: 'white', marginRight: 10}}>
        计数
      </Text>)
    };
  };

  addCount = () => {
    this.setState({
      count: this.state.count+1
    })
  }

  componentDidMount(){
    this.props.navigation.setParams({
      getCount: this.addCount
    })
  }
  render() {
    const { navigation } = this.props;
    console.log(navigation)
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Text>计数大小: {this.state.count}</Text>
        <Text>{navigation.getParam('testId')}</Text>
        <Text>{navigation.state.params.testId}</Text>
        <Text onPress={()=>{
          navigation.setParams({
            testId: '321'
          })
        }}>
          改变参数
        </Text>
        <Text onPress={()=>{
          this.props.navigation.navigate('News')
        }}>News Screen</Text>
        <Text onPress={()=>{
          this.props.navigation.goBack();
        }}>返回goback</Text>
         <Text onPress={()=>{
          this.props.navigation.pop();
        }}>返回pop</Text>

      </View>
    );
  }
}

export default DetailsScreen

在componentDidMount中setParams一个方法，然后就可以在标题栏中调用了

自定义导航栏

import React from 'react';
import { View, Text, Button } from 'react-native';


class TitleBox extends React.Component {
  render() {
    return (
      <Text>自定义标题</Text>
    )
  }
}

class News extends React.Component {
  static navigationOptions = {
    headerTitle: <TitleBox/>
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>News Screen</Text>
        <Text onPress={()=>{
          this.props.navigation.popToTop()
        }}>返回首页</Text>
      </View>
    );
  }
}

export default News

不需要导航栏

 static navigationOptions = {
    header: null
 };

底部导航

属性：

activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标，默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
adaptive - Should the tab icons and labels alignment change based on screen size? Defaults to true for iOS 11. If false, tab icons and labels align vertically all the time. When true, tab icons and labels align horizontally on tablet.
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop， 默认值：{ bottom: 'always', top: 'never' }； top | bottom | left | right 的可选值有： 'always' | 'never'。

import React from 'react';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json

import HomeScreen from './Router/HomeScreen'
import Test from './Router/block'

const TabNavigator = createBottomTabNavigator(
  {
    Main: HomeScreen,
    Test:Test
  },
  {
    initialRouteName: 'Main',
    tabBarOptions: {
      activeTintColor: 'gold',
      inactiveTintColor: 'gray',
      style: {
        height: 50,
      }
    },
  }
);



const AppContainer = createAppContainer(TabNavigator)

class App extends React.Component {
  render() {
    return (
      <AppContainer/>
    )
  }
}

export default App;

如果应用了底部导航，有些模块可能不止一个页面，这该如何处理呢？如下：

import React, {Component} from 'react';
import { View, Text, Image } from 'react-native';
import { createAppContainer, createStackNavigator, createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json

import HomeScreen from './Router/HomeScreen'
import DetailsScreen from './Router/DetailsScreen'
import News from './Router/News'
import Test from './Router/block'

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
  News:{
    screen: News
  }
},
{
    initialRouteName: 'Home',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: 'green',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        fontWeight: 'bold',
        },

    }
}
);


const TabNavigator = createBottomTabNavigator(
  {
    Main: {
      screen: AppNavigator,
      navigationOptions: ({ navigation }) => {

        return {
          tabBarLabel:'主页面',
          tabBarIcon: ({ focused }) => {
            return (
              <Image
              style={{width: 30, height:30}}
              source={
                focused
                  ? require('./images/ic_home_entertainment_p.png')
                  : require('./images/ic_home_entertainment_n.png')
              }
            />
            )
          }
        }
      }
    },
    Test:{
      screen: Test,
        navigationOptions: {
            // 底部导航
          tabBarLabel:'测试页面',
          tabBarIcon: ({ focused }) => {
         return (
            <Image
             style={{width: 30, height:30}}
             source={
            focused
             ? require('./images/ic_home_home_p.png')
            : require('./images/ic_home_home_n.png')
           }
         />
        )
  }
      }
    }
  },
  {
    initialRouteName: 'Main',
    tabBarOptions: {
      activeTintColor: 'gold',
      inactiveTintColor: 'gray',
      style: {
        height: 50,
      }
    },
    defaultNavigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state;

      return {
        gesturesEnabled: false
      }
    }
  }
);


const AppContainer = createAppContainer(TabNavigator)

class App extends Component {
  render() {
    return (
      <AppContainer/>
    )
  }
}

export default App;

在这里插入图片描述

具体代码链接：https://gitee.com/hope93/react-navigation

菜鸟搬砖记
关注
专栏目录
react-native路由跳转传参和参数的获取
九段刀客的博客
11-29 272
react
react-native路由总结
webblock的博客
04-24 2003
安装 npm install @react-navigation/native npm install @react-navigation/stack npm install @react-navigation/bottom-tabs npm install @react-navigation/material-top-tabs react-native-tab-view npm install...
React Native开发之react-navigation库详解
weixin_34126215的博客
06-03 495
众所周知，在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在0.44版本之前，开发者可以直接使用官方提供的Navigator组件来实现页面的跳转，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中。 如果开发者需要继续使用Navigator，则需...
ReactNative进阶（七）：导航组件 react-navigation_react native导航栏组件
最新发布
2401_87029798的博客
09-10 1576
在RN项目开发过程中，经常会看到如下形式的路由跳转。render() {return (在RN多页面应用程序开发过程中，页面跳转是通过路由或导航器来实现的。在0.44版本之前，开发者可以直接使用官方提供的Navigator。
React-Native导航组件React-Navigation的详细介绍
suwu150
10-20 7862
React-Native导航组件React-Navigation的详细介绍一、 导航栏分类二、 具体说明(一). StackNavigator 导航栏1.5 界面跳转和数据传递(1).navigate()-调用这个方法可以跳转到导航器中的其他页面(2) goBack() -关闭当前活跃屏,相当于功能(3)addListener() – 订阅导航生命周期事件变化(4) isFocused() – 查看屏的聚焦状态(5)state – 屏幕的当前状态/路由。
【React Native】react-navigation导航使用方法
dolacmeng的专栏
05-21 2679
上一篇介绍了如何在已有iOS项目中集成React Native。这一篇我们把上一篇的demo做下拓展，添加点击电影跳转到详情页。页面跳转使用React Native推荐的第三方导航控件：react-navigation 集成react-navigation 根据官方指引，在终端cd到项目根目录，分别输入以下命令进行集成： npm install --save react-native-navi...
react native的navigation实现
气派的欠账包店
01-03 433
在react native的开发中，我们不需要像在原生开发一样使用intent来切换各个Activity，也能很方便地实现viewpager和抽屉式导航栏的效果，facebook官方提供了三种导航栏样式 第一种:StackNavigator,这个导航栏和我们在原生开发中使用intent启动另一个全屏的Activity是差不多的效果，当然动画效果可能并不怎么一样实现代码如下：const RootNav
react-native-navigation-hooks:一组用于React Native导航的React钩子
05-23
总的来说，`react-native-navigation-hooks`为React Native开发者提供了一种简洁、类型安全且基于Hook的导航解决方案。它减少了对传统导航API的依赖，使代码更加模块化，同时也提升了开发效率。通过利用这些Hook，你...
React Native react-navigation 导航使用详解
08-28
React Native 中的 react-navigation 库是当前最流行的导航解决方案之一，该库提供了强大的导航功能，可以满足大多数移动应用程序的需求。下面我们将详细介绍 react-navigation 库的使用和实战技巧。 一、开源库...
React-Native-Boilerplate：具有常用库的React native样板
02-06
React本机样板 包含和配置的软件包 eslint >遵循airbnb样式指南 ...用于在应用程序中路由的react-native-router-flux或react-navigation （不包括） 脚步 建立 在目录中运行react-native init <proje
React—native 之 Navigator （导航路由）组件
QTFYING的博客
12-07 1297
# React Native 的 Navigator 组件 > 欢迎Follow我的GitHub: https://github.com/SpikeKing **React Native**的编程思想类似于``iOS``, 导航栏也使用``Navigator``作为标识, 类似于``Android``的``ActionBar``. 导航栏作为最重要的应用组件之一, 除了处理页面
React Native 中使用路由
北冰洋没有野人
02-21 355
在React Native 中使用路由，android 和 ios 的安装步骤是不一样的，这里使用社区的 react-navigation react navigation 官方文档 ios安装步骤： npm install react-navigation --save npm install react-native-gesture-handler --save npm install re...
react-native6.x路由的使用
qq_40526866的博客
11-27 538
const someData = [{ name: 'zhangs' }, { name: '李四' }]return (我是Home Screen我是extraData{JSON.stringify(extraData)}{/* extraData自定义数据 */}以上蓝色圈中是传递的数据。
react native---导航器（路由）组件的使用
08-14 150
1.相关参数介绍： 1>configureScence,类型是方法（function），可选择，通过这个方法可以修改页面切换时候的动画效果 2>initialRoute，类型是对象（object）表明最初的route对象。一个route代表一个页面（界面） Navigat...
reactnative入门2.9路由写法
u011290064的博客
05-02 242
导入路由插件 package.json引入 npm install 配置路由表 文件引入 跳转 作者：蒋光洵
react-native-navigation 原生路由组件的使用
Cici_fontEnd的博客
06-09 1167
GitHub地址:      https://github.com/wix/react-native-navigation      Readme   Ducument 链接里面有详细使用方法介绍.文章主要记录一下路由导航头的基本配置信息 this.props.navigator.push({ screen:'example.ScreenPush',   //唯一的注册ID title:'
深入了解React Native的导航解决方案：React Navigation与React Native Navigation对比
AI天才研究院
01-11 1264
1.背景介绍 React Native是一种使用React和JavaScript编写的跨平台移动应用开发框架，它使用了JavaScript和React的强大功能来构建原生样式的移动应用。React Native的导航是应用程序中最重要的部分之一，它决定了用户如何导航应用程序中的不同屏幕。在React Native中，有两个主要的导航库：React Navigation和React Native ...
ReactNative 基础 - 14 （路由、跳转、传参）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-20 3251
react提供了router路由react-router-dom，ReactNative为了能够在移动端有更多的路由使用体验，专门开发了路由系统. 官方网址：https://reactnavigation.org/ 使用RN的路由，需要在项目包安装并且编译成apk才能使用 1、安装：npm install @react-navigation/native 2、使用： NavigationContainer：路由容器 Stack.Navigator：栈式导航 一个匹...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值