React Navigation 基本使用

最新推荐文章于 2024-07-21 12:09:34 发布
最新推荐文章于 2024-07-21 12:09:34 发布
阅读量2.2k 收藏 3
点赞数
文章标签： react.js react native javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36833171/article/details/123033809
版权

React Navigation 基本使用

参考资料

https://reactnavigation.org/docs/

环境搭建

Minimum requirementsreact-native >= 0.63.0

  • expo >= 41 (if you use Expo)
  • typescript >= 4.1.0 (if you use TypeScript)

Installation

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

From React Native 0.60 and higher, linking is automatic. So you don’t need to run react-native link.

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.

npx pod-install ios

react-native-screens package requires one additional configuration step to properly work on Android devices. Edit MainActivity.java file which is located in android/app/src/main/java/<your package name>/MainActivity.java.

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

and make sure to add an import statement at the top of this file:

import android.os.Bundle;

Hello React Navigation

React Navigation提供了不同于浏览器的a标签的方案，它提供了适用了IOS和Android合适的过渡动画。

安装原生栈导航库（Installing the native stack navigator library）

到目前为止我们已经安装的库仅仅构建了Navigation的基本快，然而每个Navigation都是有一个自己的库的，为了使用原声的导航栈，我们需要安装@react-navigation/native-stac

npm install @react-navigation/native-stack

@react-navigation/native-stack depends on react-native-screens and the other libraries that we installed in Getting started. If you haven’t installed those yet, head over to that page and follow the installation instructions.

创建一个原生栈导航（Creating a native stack navigator）

createNativeStackNavigator函数会返回一个包含两个属性Screen和Navigator的对象。他们都是用于配置配置navigator的React组件，Navigator应该包含Screen元素作为他们的子元素来为路由定义配置。

NavigationContainer是一个用来管理导航树（navigation tree）的组件并且它包含了 navigation state，这个组件必须包含所有导航的结构，通常的，我们在app的根去渲染这个组件，通常这个组件被App.js被导出。(export)

// In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

基本案例

// In App.js in a new project
import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here'
          })
        }}
      />
    </View>
  );
}

function DetailsScreen({route,navigation}) {
  const { itemId, otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button
        title="Go to Details... again"
        onPress={() =>
          navigation.push('Details', {
            itemId: Math.floor(Math.random() * 100),
          })
        }
      />
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}


const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '主页' }}/>
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: '详情' }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

携返回值案例

// In App.js in a new project
import * as React from "react";
import { View, Text, Button, TextInput } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate("CreatePost")}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState("");

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: "white" }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          navigation.navigate({
            name: "Home",
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}



const Stack = createNativeStackNavigator();

function StackScreen() {
  const screenOptions = {
    headerStyle: {
      backgroundColor: "#f4511e",
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold",
    },
  }
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: "主页", ...screenOptions }}
      />
      <Stack.Screen
        name="CreatePost"
        component={CreatePostScreen}
        options={{
          title: "创建Post", ...screenOptions }}
      />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <StackScreen />
    </NavigationContainer>
  );
}

export default App;

Replacing the title with a custom component

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: (props) => <LogoTitle {...props} /> }}
      />
    </Stack.Navigator>
  );
}

给标题来点样式

// In App.js in a new project
import * as React from "react";
import { View, Text, Button, TextInput } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";

function HomeScreen({ navigation, route }) {
  React.useEffect(() => {
    if (route.params?.post) {
      // Post updated, do something with `route.params.post`
      // For example, send the post to the server
    }
  }, [route.params?.post]);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Button
        title="Create post"
        onPress={() => navigation.navigate("CreatePost")}
      />
      <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
    </View>
  );
}

function CreatePostScreen({ navigation, route }) {
  const [postText, setPostText] = React.useState("");

  return (
    <>
      <TextInput
        multiline
        placeholder="What's on your mind?"
        style={{ height: 200, padding: 10, backgroundColor: "white" }}
        value={postText}
        onChangeText={setPostText}
      />
      <Button
        title="Done"
        onPress={() => {
          // Pass and merge params back to home screen
          navigation.navigate({
            name: "Home",
            params: { post: postText },
            merge: true,
          });
        }}
      />
    </>
  );
}



const Stack = createNativeStackNavigator();

function StackScreen() {
  const screenOptions = {
    headerStyle: {
      backgroundColor: "#f4511e",
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold",
    },
  }
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: () => <Text>Text</Text>,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="black"
            />
          ),
        }}
      />
      <Stack.Screen
        name="CreatePost"
        component={CreatePostScreen}
        options={{
          headerTitle: () => <Text>Text</Text>,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="black"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <StackScreen />
    </NavigationContainer>
  );
}

export default App;

Tab.Navigator

import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Ionicons from 'react-native-vector-icons/Ionicons';
function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
    </View>
  );
}

export default function App() {
  const Tab = createBottomTabNavigator();
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }}/>
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
     
    </NavigationContainer>
  );
}

隐藏顶部导航栏的一些办法

可以设置headerShown: false

<NavigationContainer>
	<Stack.Navigator initialRouteName="Index">
		<Stack.Screen
			name="Index"
      component={IndexScreen}
      options={{ title: "主页" }, {headerShown: false}}  
			/>
	</Stack.Navigator>
</NavigationContainer>

<Tab.Navigator>
	<Tab.Screen 
		name="Home" 
		component={HomeScreen} 
		options={{headerShown:false}}
	/>
	<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

Stack Navigation常用配置

<Stack.Screen
// 具体参数设定请参考：https://reactnavigation.org/docs/native-stack-navigator#options
	name="Details"
	component={DetailsScreen}
	options={
		{title: "详情"},
		{animation: "slide_from_right"},// 划入方式
		// {headerTitleAlign:"center"}, // 标题居中（近Android，IOS默认居中）
		// {presentation: "formSheet"}, // 几乎仅IOS支持
		{headerShown: true } // 不要隐藏标题，放到最后面写
}  
/>

综合案例

import * as React from "react";
import { Text, View, Button, Dimensions } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Ionicons from "react-native-vector-icons/Ionicons";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { SafeAreaView } from "react-native-safe-area-context";

// 主页
function IndexScreen({ navigation }) {
  function HomeScreen() {
    return (
      <SafeAreaView edges={['top', 'left', 'right']}
        style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
      >
        <Button
          title="Go to Details"
          onPress={() => navigation.navigate("Details")}
        />
      </SafeAreaView>
    );
  }
  function SettingsScreen() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Settings!</Text>
      </View>
    );
  }
  const Tab = createBottomTabNavigator();
  Tab.navigationOptions = ({navigation}) => {
    //  关键这一行设置 header:null
    return{
        header: null,
    }
  };
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name="Home" 
        component={HomeScreen}
        options={{headerShown:false}}
      />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

export default function App() {
  const Stack = createNativeStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Index">
        <Stack.Screen
          name="Index"
          component={IndexScreen}
          options={
            // headerTitleAlign和 headerShown最好别混用
            {title: "主页"}, {animation: "slide_from_right"},
            {headerShown: false}
          }  
        />
        <Stack.Screen
          // 具体参数设定请参考：https://reactnavigation.org/docs/native-stack-navigator#options
          name="Details"
          component={DetailsScreen}
          options={
            {title: "详情"},
            // {headerTitleAlign:"center"}, // 标题居中（近Android，IOS默认居中）
            // {presentation: "formSheet"}, // 几乎仅IOS支持
            {animation: "slide_from_right"},// 划入方式
            {headerShown: true } // 不要隐藏标题
          }  
          
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
清紫悠悠
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Navigation的使用
慕天远的博客
08-29 404
在React Navigation中主要有三种类型的组件： StackNavigation 用于实现各个页面之间的跳转 TabNavigation 用来实现同一个页面上不同界面的切换 DrawerNavigation 用来实现侧滑的抽屉效果 StackNavigation 采用堆栈式的页面导航来实现各个界面的跳转。它的构造函数 createSt...
官方推荐react-navigation的具体使用详解
08-27
以上就是 React-Navigation 的基本使用方法。通过 StackNavigator、TabNavigator 和 DrawerNavigator 的组合，你可以构建出复杂而灵活的导航结构。同时，React-Navigation 支持自定义头部、抽屉样式，以及与其他状态...
React Native react-navigation 导航使用详解
08-28
本篇文章主要介绍了React Native react-navigation 导航使用详解，详解的介绍了react-navigation导航的使用，具有一定的参考价值，有兴趣的可以了解一下
[个人实战]React Native项目中Navigation的使用
04-21
结合https://blog.csdn.net/weixin_41044949/article/details/80017164文档查看，有全程讲解,
reactive native 使用react-navigation实现tabbar底部菜单导航栏
qq_44184452的博客
06-21 170
reactive native 0.74 使用react-navigation实现tabbar底部菜单导航栏
集成react-navigation路由导航与避坑指南
qq_42430654的博客
04-26 872
作为一个RN新人，在简单了解了控件使用后，一个重头就在于路由跳转React Native 官网指出现在主推的路由跳转方案是react-navigation，那么对于其他方案这边就不做了解了。react-navigation官网在集成这个东西的时候，踩过很多坑，业余时间吃了一个多礼拜，因此，这篇博文的目的在于简介react-navigation集成的流程，以及遇到各种问题的解决办法。
react-navigation 组件详解
huangjianfeng21的博客
07-13 639
react-navigation 介绍 随着react-navigation逐渐稳定，Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件，Navigator 自然胜任不了，这时React Native社区便孕育出了一个开源导航组件react-navigation。 react-navigation的出现替代了Navigator、 Ex-N...
【前端知识】React 基础巩固(四十)——Navigate导航
Outman's blog
07-30 2469
新建Login页面，在Login中引入Navigate，实现点击登陆按钮跳转至/home当路由均无匹配时，通过Navigate跳转至NotFound界面，其中为通配符：构建NotFound.jsx。
【React Native】react-navigation导航使用方法
dolacmeng的专栏
05-21 2413
上一篇介绍了如何在已有iOS项目中集成React Native。这一篇我们把上一篇的demo做下拓展，添加点击电影跳转到详情页。页面跳转使用React Native推荐的第三方导航控件：react-navigation 集成react-navigation 根据官方指引，在终端cd到项目根目录，分别输入以下命令进行集成： npm install --save react-native-navi...
react之useNavigate() 三种的传参方法和接收方法
fe13162458806ng的博客
02-22 2725
【代码】react之useNavigate() 三种的传参方法和接收方法。
Navigate组件的使用（React Router6）
richest_qi的博客
06-06 4206
，创建react项目：router_app。默认使用当前react的最新版本：react@18、react-dom@18。 ，默认下载安装最新版本r：react-router-dom@6。涉及的文件包括： 入口文件index.js 注意点：。 注意点： pages/About/index.jsx（About组件） Navigate组件的使用 时，展示Home组件； 时，展示About组件。 时，既不展示Home组件，也不展示About组件。 现在，我们使用Redirect Navigate组件，实现：
React Navigation 使用中遇到的问题小结
08-27
React Navigation 使用中遇到的问题小结 React Navigation 是一个流行的导航库，广泛应用于 React Native 开发中。然而，在使用 React Navigation 时，开发者经常会遇到一些问题，特别是在 Android 和 iOS 平台上。...
ReactNavigationDemo:react navigation的使用
05-18
ReactNavigationDemo是一个基于...总的来说，ReactNavigationDemo是一个学习和实践React Native导航的好资源，它涵盖了`react-navigation`的基本用法和自定义配置，对于开发者来说是提升移动应用用户体验的重要一环。
React_Navigation:React_Navigation 简要使用
05-18
在这个简要使用指南中，我们将深入探讨React_Navigation的核心概念和基本用法。 首先，React_Navigation基于React组件模型，通过创建和配置不同的导航器（Navigator）来管理屏幕间的跳转。其中，Stack Navigator是...
ReactNative使用navigate进行界面之间的跳转
倒骑驴走着瞧的博客
03-15 3147
navigation.navigate(routeName，params) routeName：跳转目标界面的路由名，也就是导航器中配置的路由名 params：需要传递到跳转的界面的参数
rn之react-navigation一
xinene的博客
09-23 826
rn的导航
React Navigation使用
weixin_39388536的博客
09-11 242
配置导航堆栈 import * as React from 'react'; import { View, Text } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); // crea
React Native导航栏系列（一）
专注前端技术，包括Web端、移动端、小程序、APP
08-31 1451
对于RN新手来说，这里面的很多知识点可能会让你觉得很绕。就导航栏来说，就会让你觉得有点不适应，因为创建了一个新项目之后，导航栏的一些组件并不包括在创建好的项目中，只能在后面再进行安装。接下来，我会出RN导航栏的文章一二三。 此导航栏适用于安卓、苹果。 第一步，安装相应的组件： 在React Native项目中安装所需的软件包（根据自己的系统进行选择命令）： npm install @react-navigation/native yarn add @react-navigation/native 接着还
官方推荐react-navigation的使用
大灰狼的小绵羊哥哥的博客
04-27 1803
看了官方文档的导航器对比，发现现在主推的方案是一个单独的导航库react-navigation，据说它的使用十分简单。我就写个demo，试了一下。 一、主要构成 按使用形式主要分三部分: 1 StackNavigator: 类似于普通的Navigator，屏幕上方导航栏 2 TabNavigator: 相当于ios里面的TabBarController，屏幕下方的标签栏 3 Dr
前端三大主流框架Vue React Angular有何不同？
最新发布
2401_85955297的博客
07-21 908
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值