如何在带有React Navigation 5的navigationOptions中使用参数

Question

很抱歉，我不明白另一个问题的答案，因为它们与我想要的答案并不完全相同。我是这个的初学者。

这是我的App.js ：（ App.js的新方法）

const Stack = createStackNavigator()

export default function App() {
  return <NavigationContainer>
    <Stack.Navigator>
<Stack.Screen options={{title: 'Profile'},Profile.navigationOptions} name="Profile" component={Profile}/>
name="AccountOverview" component={AccountOverview}/>
    </Stack.Navigator>
  </NavigationContainer>
}

这是我的profile.js navigationOptions

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;

    if (params.facebookName) {
      var usernameTitle = params.facebookName || "";
    } else {
      var usernameTitle = params.usernameValue || "";
    }
    return {
      title: "Welcome " + usernameTitle,

      headerRight: () =>
        <TouchableOpacity style={styles.btn} onPress={params.removeItemValue}>
          <Text style={styles.btnText}>Log out</Text>
        </TouchableOpacity>

    };
  };

我遇到的错误是undefined is not an object (evaluating 'navigation.state.params')

我也无法理解React Navigation网站上的文档。

所以我希望我能针对我的确切代码方式。

非常感谢，并为您提供了可接受的解决方案的答案。

感谢您的时间

Answer 1

您可以通过三种方式使用params：

1. 在堆栈导航器中定义屏幕时，您可以向其发送初始参数：<Stack.Screen ... initialParams={{ facebookName: "developer" }}/>

2. 当从堆栈中的其他屏幕导航到一个屏幕时：navigation.navigate("Profile", { facebookName: "developer" })

3. 您还可以从屏幕内部更新屏幕的参数：navigation.setParams({ title: "new title" })