React Native中createStackNavigator onPress设置标题失败求解决方案

嘿，我看你在给按钮绑定跳转事件传递标题的时候踩坑了，咱们来拆解问题并给出正确的实现方式：

先说说你代码里的问题 #

你现在把setParams放在了navigate的第二个参数里，这完全搞错了用法：

• setParams是用来更新当前页面的导航参数（比如修改Page1自己的header标题），不是用来给跳转的目标页面传参的。
• 跳转到新页面时，参数应该直接通过navigate的第二个参数传递，目标页面会从导航状态里拿到这些参数。

正确的实现步骤（React Navigation 4.x及更早版本） #

1. 修改Page1里的跳转按钮代码

把传递标题的逻辑直接放在navigate的第二个参数中：

// Page1.js
<TouchableOpacity 
  onPress={() => this.props.navigation.navigate('Page2', { Title: '自定义标题' })}
>
  <Text>跳转到Page2</Text>
</TouchableOpacity>

2. 调整StackNavigator的配置

在Page2的navigationOptions里，通过navigation.getParam安全获取传递的标题（第二个参数是默认值，防止参数不存在时出错）：

// 导航配置文件
export default createStackNavigator(
  {
    Main: { screen: Page1 },
    Page2: {
      screen: Page2,
      navigationOptions: ({ navigation }) => ({
        headerTitle: navigation.state.getParam('Title', 'Default Title'),
      }),
    },
  },
  { initialRouteName: 'Main' }
);

如果你用的是React Navigation 5+（新版本写法） #

如果你的项目用的是v5及以上版本，写法会略有不同，因为API做了调整：

1. 导航配置文件

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

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Main">
        <Stack.Screen name="Main" component={Page1} />
        <Stack.Screen 
          name="Page2" 
          component={Page2}
          options={({ route }) => ({
            // 可选链操作符避免参数不存在时报错，默认值是'Default Title'
            headerTitle: route.params?.Title || 'Default Title'
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. Page1的跳转代码和之前一致

<TouchableOpacity 
  onPress={() => navigation.navigate('Page2', { Title: '自定义标题' })}
>
  <Text>跳转到Page2</Text>
</TouchableOpacity>

关键总结 #

• 给跳转目标页面传参：直接用navigation.navigate('页面名', { 参数名: 值 })
• 获取参数：旧版本用navigation.state.getParam，新版本用route.params
• setParams只用来修改当前页面的导航参数，别搞混啦～

内容的提问来源于stack exchange，提问作者Top World