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

Question

I'm using stack navigation for a React Native app, and I want to dynamically change the title of a screen when you go to it from another screen.

My navigation is set up as follows in App.js :

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

On the HomeScreen , I have a FlatList of TouchableOpacity elements that link to the ResultDetailsScreen as follows:

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

The item I'm sending to the ResultDetailsScreen has both id and name properties.

How do I take the name property of item and dynamically set that for the stack navigation title on the ResultDetailsScreen ? I've looked at related topics on SO, etc., but I can't seem to get it to work.

I've seen some stuff about maybe using the following:

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

But when I do that, I don't see New Title on the ResultDetailsScreen , and for whatever reason, I can no longer go back in the app.

Lastly, if it makes a difference, I'm using functions and hooks, not classes for my React Native code.

Answer 1

You can set the title when you navigate to the screen

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

More here

Answer 2

you have to create a static function in which screen you have to set dynamic name

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

Answer 3

When using functions for React Native components instead of classes, you have to do the following:

First, send the data you want to use for the page title to the page using navigation.navigate . For example:

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

Then, on the page itself, you can add navigationOptions as a property of the screen function as follows:

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;