如何更改react原生功能组件中的标题

Question

我使用的是react navigation v4，我想更改标题，并且在渲染时使用的方法很慢(堆栈导航器中设置的标题先渲染，然后渲染新的标题(，有没有更好的方法可以只渲染新的

export default NewsList = ({ results, navigation}) => {
return <View >
<FlatList
data={results}
keyExtractor={result => result.id}
renderItem={({ item }) => {
return (
<TouchableOpacity 
onPress={() => navigation.navigate( 'news',title: item.title)}>
<NewsCard result={item} />
</TouchableOpacity>)
}}
/>
</View>
};

////////////////////////////////////////////////////////////////////

export default NewsScreen = ({ navigation}) => {
NewsScreen.navigationOptions = {
title: navigation.getParam("title");,
};
}

////////////////////////////////////////////////////////////////////

const NewsStack = createStackNavigator({
NewsList :NewsList,
News :NewsScreen 
},{
initialRouteName:'NewsList',
defaultNavigationOptions: {

headerStyle: {
backgroundColor: '#4BB5C3',
},
},
navigationOptions: {
tabBarLabel: 'NewsList',
},
});
export default createAppContainer(NewsStack);

Answer 1

Ciao，在导航到NewsList之前尝试设置标题，如下所示：

export default NewsList = ({ results, navigation}) => {
return <View >
<FlatList
data={results}
keyExtractor={result => result.id}
renderItem={({ item }) => {
return (
<TouchableOpacity 
onPress={() => {
navigation.setParams({ otherParam: item.title });
navigation.navigate('news');
}
}>
<NewsCard result={item} />
</TouchableOpacity>)
}}
/>
</View>
};

我认为你可以删除NewsScreen中的navigationOptions。