使用 React Navigation 更改标题

React Navigation 是 React Native 的一种导航库，它为我们提供了一套完整的导航组件和 API，用于构建优秀的移动应用程序。在 React Navigation 中，我们可以轻松地更改屏幕标题。在本文中，我们将介绍如何使用 React Navigation 更改标题。

1. 准备工作

在开始之前，我们需要先安装 React Navigation。使用以下命令进行安装：

npm install @react-navigation/native

接下来，我们需要安装 Stack Navigator。Stack Navigator 是 React Navigation 中最常用的导航器之一。使用以下命令进行安装：

npm install @react-navigation/stack

2. 创建 Stack Navigator

我们首先需要创建一个 Stack Navigator。在 App.js 文件中，我们可以编写以下代码：

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

import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

在上面的代码中，我们导入了 NavigationContainer 和 createStackNavigator 组件。在 Stack 中，我们定义了两个屏幕：Home 和 Details。现在我们已经创建了 Stack Navigator，接下来我们将学习如何更改屏幕标题。

3. 更改标题

在 React Navigation 中，我们可以使用 options 属性来更改屏幕标题。在组件中，我们可以通过 options 属性来指定屏幕选项。以下代码是如何更改屏幕标题的示例：

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

export default function DetailsScreen({ route, navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
}

DetailsScreen.navigationOptions = {
  title: 'Details',
};

在上面的代码中，我们使用了 navigationOptions 属性来更改屏幕标题。在屏幕组件中，我们可以通过 navigationOptions 属性来定义屏幕选项。我们将 title 属性设置为 'Details'，这将是屏幕的新标题。

4. 返回代码片段

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

import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

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

export default function DetailsScreen({ route, navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
}

DetailsScreen.navigationOptions = {
  title: 'Details',
};

以上就是使用 React Navigation 更改屏幕标题的全部内容。希望这篇文章对你有所帮助。