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的{{1}}具有ResultDetailsScreen和id属性。

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

我已经看到一些有关使用以下内容的东西：

item

但是，当我这样做时，在ResultDetailsScreen上看不到navigation.setParams({ title: 'New Title' });，并且由于某种原因，我无法再返回该应用程序。

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

Answer 1

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

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

More here

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;

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

3 个答案: