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

Question

我正在为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属性。

如何获取item的name属性，并在ResultDetailsScreen上为堆栈导航标题动态设置该name属性？ 我已经看过SO等等的相关主题，但是我似乎无法使其正常工作。

我看过一些有关使用以下内容的信息：

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

但是当我这样做时，我在ResultDetailsScreen不到“ New Title ”，并且由于某种原因，我无法再返回该应用程序。

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

Answer 1

您可以在导航到屏幕时设置标题

navigation.navigate('ResultDetails', { title: 'New Title' });

这里更多

Answer 2

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

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

Answer 3

在将函数用于React Native组件而不是类时，您必须执行以下操作：

首先，使用navigation.navigate将要用于页面标题的数据发送到页面。 例如：

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

然后，可以在页面本身上，将navigationOptions添加为屏幕功能的属性，如下所示：

const ResultDetailsScreen = ({ navigation }) => {
    // Return your view here like you always do.
};

// Add this.
// Do this to get the name property to be dynamically set for the page title.
ResultDetailsScreen.navigationOptions = ({ navigation }) => {
    const name = navigation.getParam('name');

    return {
        title: name
    };
};

export default ResultDetailsScreen;