React Navigation 进阶：从入门到精通

2023-12-19 19:52:11

安装和配置

首先，你需要安装 React Navigation。你可以使用以下命令通过 npm 安装：

npm install react-navigation --save

安装完成后，你需要在你的项目中配置 React Navigation。你需要在你的 App.js 文件中导入 NavigationContainer 组件并将其包裹在你的应用程序组件周围。

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

export default function App() {
  return (
    <NavigationContainer>
      <MyNavigator />
    </NavigationContainer>
  );
}

2. 创建导航器

接下来，你需要创建你的导航器。导航器是一个 React 组件，它负责管理应用程序的导航状态。你可以使用不同的导航器来创建不同的导航结构。

最常见的导航器是 StackNavigator。StackNavigator 用于创建具有堆栈结构的导航器。当你在堆栈中添加一个新屏幕时，它会将其推送到顶部，并且当你在堆栈中返回时，它会将其弹出。

你可以使用以下代码来创建 StackNavigator：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

3. 创建屏幕

导航器需要屏幕才能工作。屏幕是 React 组件，它们代表应用程序的不同部分。

你可以使用以下代码来创建屏幕：

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

function HomeScreen() {
  return (
    <View>
      <Text>Home Screen</Text>
    </View>
  );
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
}

4. 导航到其他屏幕

你可以使用 useNavigation 钩子来导航到其他屏幕。useNavigation 钩子返回一个对象，该对象包含一个 navigate 方法。你可以使用 navigate 方法来导航到其他屏幕。

你可以使用以下代码来导航到其他屏幕：

import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

5. 添加过渡动画

你可以使用 transitionConfig 属性来添加过渡动画。transitionConfig 属性是一个函数，它返回一个过渡动画配置对象。

你可以使用以下代码来添加过渡动画：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyNavigator() {
  return (
    <Stack.Navigator
      transitionConfig={() => ({
        transitionSpec: {
          duration: 500,
          easing: Easing.out(Easing.poly(4)),
          timing: Animated.timing,
        },
        screenInterpolator: (sceneProps) => {
          const { position, scene } = sceneProps;
          const thisSceneIndex = scene.index;
          const lastSceneIndex = scene.route.routes[scene.route.routes.length - 1].index;

          // Calculate the amount of translation along the x-axis
          const translateX = position.interpolate({
            inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
            outputRange: [sceneWidth, 0, -sceneWidth],
          });

          // Calculate the amount of translation along the y-axis
          const translateY = position.interpolate({
            inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
            outputRange: [sceneHeight, 0, -sceneHeight],
          });

          return {
            transform: [{ translateX }, { translateY }],
          };
        },
      })}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}