React Navigation 3x 系列教程之 createStackNavigator 开发指南

1. 引入 React Navigation 和 createStackNavigator

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

const Stack = createStackNavigator();

2. 定义屏幕组件

在 React Navigation 中，屏幕组件是应用程序中可导航到的单个视图。让我们定义两个简单的屏幕组件：

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

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

3. 配置屏幕路由

createStackNavigator 需要一个屏幕路由配置对象，该对象指定了屏幕及其导航选项。

const screens = {
  Home: HomeScreen,
  Details: DetailsScreen,
};

const options = {
  initialRouteName: 'Home',
};

4. 创建导航器

现在，让我们使用 createStackNavigator 创建一个导航器：

const MyStack = () => {
  return (
    <Stack.Navigator screenOptions={options} screens={screens} />
  );
};

5. 渲染导航器

在应用程序中，我们可以使用 MyStack 组件来渲染导航器：

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

6. 自定义导航选项

我们可以通过在屏幕组件中设置导航选项来自定义导航栏的外观和行为。

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

HomeScreen.navigationOptions = {
  title: 'Home',
  headerStyle: {
    backgroundColor: 'red',
  },
  headerTintColor: 'white',
};

7. 使用导航参数

导航参数允许在屏幕之间传递数据。我们可以使用 useRoute 钩子来访问导航参数。

const DetailsScreen = () => {
  const route = useRoute();

  return (
    <View>
      <Text>Details Screen</Text>
      <Text>{route.params.itemId}</Text>
    </View>
  );
};

8. 使用导航事件

导航事件允许我们在导航发生时执行代码。我们可以使用 addListener 方法来添加导航事件监听器。

const HomeScreen = () => {
  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Do something when the screen is focused
    });

    return unsubscribe;
  }, [navigation]);

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

9. 总结

在本文中，我们详细介绍了 React Navigation 3x 中的 createStackNavigator API。我们学习了如何创建导航器、定义屏幕组件、配置屏幕路由、自定义导航选项、使用导航参数和导航事件。通过本文，您已经掌握了使用 createStackNavigator 构建强大导航系统的基础知识。