react-native 路由安装与使用

一、安装

1.安装依赖

yarn add react-native-screens
yarn add react-native-safe-area-context
yarn add @react-navigation/native-stack

从 React Native 0.60 及更高版本开始，。所以你不需要运行 react-native link。

2.ios & android 配置

ios

npx pod-install ios

android

react-native-screens软件包需要一个额外的配置步骤才能在 Android 设备上正常工作。

编辑MainActivity.java

位于android/app/src/main/java/<你的项目名称>/MainActivity.java.

将下面代码添加到MainActivity类的主体中：

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

并确保在此文件顶部的包声明下方添加以下导入声明：

import android.os.Bundle;

3.我们会在应用程序的根目录渲染此组件，这通常是从App.js

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

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

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

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

export default App;

现在我们的堆栈有两条路线，一条Home路线和一条Details路线。可以使用组件来指定路线Screen。该Screen组件接受一个name与我们将用于导航的路线名称相对应的 prop，以及一个component与它将渲染的组件相对应的 prop。

这里，Home路由对应组件HomeScreen，Details路由对应组件DetailsScreen。堆栈的初始路由就是Home路由。尝试将其更改为Details并重新加载应用程序（React Native 的快速刷新不会更新 的更改initialRouteName，如您所料），请注意您现在将看到屏幕Details。然后将其更改回Home并再次重新加载。
 

二、使用

1.路由跳转

import * as React from 'react';
import { Button, View, Text } 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')}
      />
    </View>
  );
}

2.路由传参 & 读取路由参数
 

1）传参

navigation.navigate('Details', {
    itemId: 86,
    otherParam: 'anything you want here',
})

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>
  );
}

1）读取
 

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 to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}