我正在为 React Native 应用程序使用堆栈导航，我想在您从另一个屏幕转到某个屏幕时动态更改该屏幕的标题。

我的导航在App.js中设置如下:

const navigator = createStackNavigator({
    Home: HomeScreen,
    ResultDetails: ResultDetailsScreen
}, {
    initialRouteName: 'Home',
    defaultNavigationOptions: {
        title: 'App Name'
    }
});

在 HomeScreen 上，我有一个包含 TouchableOpacity 元素的 FlatList，它链接到 ResultDetailsS​​creen，如下所示:

<FlatList
    data={results}
    keyExtractor={ (result) => result.id }
    renderItem={ ({ item }) => {
        return (
            <TouchableOpacity
                onPress={ () => navigation.navigate('ResultDetails', item) }
            >
                <Text>{ item.name }</Text>
            </TouchableOpacity>
        );
    } }
/>

我发送到 ResultDetailsS​​creen 的 item 具有 id 和 name 属性。

如何获取 item 的 name 属性并为 ResultDetailsS​​creen 上的堆栈导航标题动态设置该属性？我查看了有关 SO 等的相关主题，但我似乎无法让它发挥作用。

我看过一些关于可能使用以下内容的内容:

navigation.setParams({
    title: 'New Title'
});

但是当我这样做时，我在 ResultDetailsS​​creen 上看不到 New Title，并且无论出于何种原因，我都无法再返回应用程序。

最后，如果它有所不同，我正在使用函数和钩子(Hook)，而不是我的 React Native 代码的类。

最佳答案

你必须创建一个静态函数，你必须在其中设置动态名称的屏幕

 static navigationOptions = ({ navigation }) => {
        navOptions = navigation
        return {
            title: 'Notification',
        }
    }

https://stackoverflow.com/questions/57981825/