时间戳

首页 > 解决方案 > 如何动态更改 React Native 堆栈导航屏幕的标题？

reactjs - 如何动态更改 React Native 堆栈导航屏幕的标题？

问题描述

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

我的导航设置如下App.js：

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

在 上HomeScreen，我有一个链接到如下FlatList的TouchableOpacity元素：ResultDetailsScreen

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

item我要发送到的有ResultDetailsScreen和id属性name。

如何获取并动态设置堆栈导航标题的name属性？我已经查看了关于 SO 等的相关主题，但我似乎无法让它发挥作用。itemResultDetailsScreen

我已经看到了一些关于可能使用以下内容的内容：

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

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

最后，如果它有所作为，我使用的是函数和钩子，而不是我的 React Native 代码的类。

标签： reactjsreact-nativereact-navigationreact-hooks

解决方案

您必须创建一个静态函数，您必须在其中设置动态名称

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

推荐阅读