要在React Navigation中更改后退按钮的标题,你可以为StackNavigator配置headerTitle和headerBackTitle属性
首先确保你已安装react-navigation和相关依赖:
npm install @react-navigation/native @react-navigation/stack
接下来创建StackNavigator:
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen'; // 载入HomeScreen组件
import DetailsScreen from './DetailsScreen'; // 载入DetailsScreen组件
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="首页">
<Stack.Screen
name="首页"
component={HomeScreen}
/>
<Stack.Screen
name="详情"
component={DetailsScreen}
options={{ headerBackTitle: '返回上一页' }} // 在这里设置自定义后退按钮标题
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
上述代码定义了一个StackNavigator,其中包含两个页面:HomeScreen和DetailsScreen。我们通过设置options参数中的headerBackTitle属性,为DetailsScreen页面后退按钮指定自定义标题"返回上一页"。
领取专属 10元无门槛券
手把手带您无忧上云