如何在ReactiveNavigation6中动态设置组件中的标题？
如何在ReactiveNavigation6中动态设置组件中的标题？
提问于 2021-12-09 23:18:20
尝试在ReactiveNavigation6中动态设置标头的title，但我一直收到警告消息：
警告:不能在呈现其他组件(
NativeStackNavigator)时更新组件(CategoryMealsScreen)
我的领航员脱光了衣服：
import * as React from 'react'
import { Platform } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import CategoryMealsScreen from '../screens/CategoryMealsScreen'
import colors from '../constants/colors'
const Stack = createNativeStackNavigator()
export default MealsNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: Platform.OS === 'android' ? colors.primaryColor : '',
},
headerTintColor: Platform.OS === 'android' ? 'white' : colors.primaryColor,
}}
>
<Stack.Screen
name="CategoryMeals"
component={CategoryMealsScreen}
options={{ headerBackTitle: '' }}
/>
</Stack.Navigator>
</NavigationContainer>
)
}如何在组件中设置title：
navigation.setOptions({
title: selectedCategory.title,
})根据setOptions上的文档。供参考的全部组成部分：
import React from 'react'
import { View, StyleSheet, FlatList } from 'react-native'
import MealItem from '../components/MealItem'
import { CATEGORIES, MEALS } from '../data/dummy-data'
const CategoryMealsScreen = ({ navigation, route }) => {
const catId = route.params.categoryId
const selectedCategory = CATEGORIES.find(cat => cat.id === catId)
const displayedMeals = MEALS.filter(mean => mean.categoryIds.indexOf(catId >= 0))
// Issue falls here
navigation.setOptions({
title: selectedCategory.title,
})
const renderMealItem = ({ item }) => {
return (
<MealItem
title={item.title}
image={item.imageUrl}
duration={item.duration}
complexity={item.complexity}
affordability={item.affordability}
onSelectMeal={() => {
navigation.navigate('MealDetail', {
mealId: item.id,
})
}}
/>
)
}
return (
<View style={styles.container}>
<FlatList
keyExtractor={item => item.id}
data={displayedMeals}
renderItem={renderMealItem}
style={{ width: '100%' }}
/>
</View>
)
}
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 15,
},
})
export default CategoryMealsScreen研究：
在我的世博应用程序中，所有东西都可以工作，但我不确定组件是否设置类别ID，这取决于从道具中选择了哪些内容，如果无法从导航器在堆栈屏幕上设置标题，如何动态设置title？
回答 1
Stack Overflow用户
发布于 2021-12-15 10:15:50
我不是这方面的专家，但我只是遇到了同样的问题。我认为这可能是因为在渲染屏幕时，您告诉我们要更改NativeStackNavigator。
与其在导航器options={{ headerBackTitle: '' }}中设置Stack.Screen，不如将其设置为：options={{headerShown:false}}
然后，在CategoryMealsScreen内部，您可以在useEffect或useLayout效果中做任何您想做的事情(在这些效果之外执行会导致错误)，如下所示：
useLayoutEffect(() => {
navigation.setOptions({ headerShown: true, title: selectedCategory.title });
}, [selectedCategory.title]);注意，您必须从“react”导入useEffect或useLayoutEffect，如下所示：import {useEffect, useLayoutEffect} from 'react'
您可以了解更多关于useEffect与useLayoutEffect here.的知识--这应该适用于react导航v6，我不知道其他版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70297936
复制相关文章
相似问题
腾讯云开发者
