ReactNative Expo 急速教程（3） - 多页切换

多页应用有多种选择，但是官方推荐的是React Navigation。本文会做一个如下的app。

首先安装一堆依赖：

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

然后安装组件：

npm install @react-navigation/stack -S

代码如下：

import * as React from 'react';
import { View, Text ,Button} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/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>
  );
}
const Stack = createStackNavigator();
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;

让我们来分析一下。

createStackNavigator是一个返回包含2个属性的对象的函数。Screen和Navigator。它们都是用于配置导航器的React组件。Navigator应该包含Screen元素作为它的子元素来定义路由的配置。

NavigationContainer是一个管理我们的导航树并包含导航状态的组件。这个组件必须包裹所有的导航器结构。通常，我们会在应用程序的根部渲染这个组件，这通常是从App.js导出的组件。

navigation - 导航道具被传递到堆栈导航器中的每一个屏幕组件中 navigate('Details')--我们调用导航函数,并附上我们想把用户移动到的路线名称

现在我们的堆栈有两个路径，一个是Home路径，一个是Details路径。路由可以通过使用Screen组件来指定。Screen组件接受一个对应于我们要用来导航的路径名称的name 属性，以及一个对应于它要渲染的组件的component 属性。

这里，Home 路由对应于 HomeScreen 组件，Details 路由对应于 DetailsScreen 组件。堆栈的初始路由是 Home 路由。

传递参数

让我们看看当我们导航到这些路由时，如何将数据传递给路由。

1. 把参数放在一个对象中作为导航函数的第二个参数传递给路由： navigation.navigate('RouteName', { /* params go here */ })
2. 读取屏幕组件中的参数：route.params。

Params不仅可以用来传递一些数据到一个新的界面，而且也可以用来传递数据到之前的界面。例如，假设你有一个带有创建帖子按钮的界面，创建帖子按钮打开一个新的界面来创建帖子。在创建帖子后，您想把帖子的数据传回之前的界面。

要实现这一点，你可以使用navigate方法，如果屏幕已经存在，它的作用就像goBack。你可以用navigate传递参数来把数据传回去

import * as React from 'react';
import { View, Text ,Button} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen({navigation,route}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
  <Text>{route.params?route.params.post:"null"}</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details',{
            itemId: 86,
            otherParam: 'anything you want here',
          })}
      />
    </View>
  );
}
const Stack = createStackNavigator();
function DetailsScreen({  navigation,route }) {
  const { itemId } = route.params;
  const { otherParam } = route.params;
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
  <Text>{itemId}</Text>
  <Text>{otherParam}</Text>
  <Button
        title="Done"
        onPress={() => {
          // Pass params back to home screen
          navigation.navigate('Home', { post: "postText" });
        }}
      />
    </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;

总结

本文创建了一个应用，此应用有两个页面，可以在两个页面之间导航，且可以在导航过程中传递参数。

文章编译来自：reactnavigation.org/docs/gettin…