本机反应:使用navigationOptions将Params传递到另一个屏幕
本机反应:使用navigationOptions将Params传递到另一个屏幕
提问于 2020-07-17 03:31:43
我正在尝试将标题设置为已通过的param。
基本上，我有两个文件在交流。
Categories.js:
import { CATEGORIES } from '../data/dummy-data';
const CategoriesScreen = props => {
const renderGridItem = itemData => {
return (
<TouchableOpacity onPress={() => {
props.navigation.navigate('CategoryMeals', { categoryId: itemData.item.id });
}} >
<View style={styles.gridItem}>
<Text>{itemData.item.title}</Text>
</View>
</TouchableOpacity>
);
};在这个文件上，我传递一个params categoryId，以便在CategoryMealsScreen.js上使用它。
CategoryMealsScreen.js
import { CATEGORIES } from '../data/dummy-data';
const CategoryMealsScreen = props => {
const catId = props.route.params.categoryId;
const selectedCategory = CATEGORIES.find(cat => cat.id === catId);
return (
<View style={styles.screen}>
<Text>Category Meals Screen</Text>
<Text>{selectedCategory.title}</Text>
<Button title="Go to Details" onPress={() => {
props.navigation.navigate('MealDetail');
}} />
<Button title="Go Back" onPress={() => {
props.navigation.goBack();
}} />
</View>
);
}
CategoryMealsScreen.navigationOptions = navigationData => {
const catId = props.route.params.categoryId;
const selectedCategory = CATEGORIES.find(cat => cat.id === catId);
return {
headerTitle: selectedCategory.title
}
};请注意下面的代码：
CategoryMealsScreen.navigationOptions = navigationData => {
const catId = props.route.params.categoryId;
const selectedCategory = CATEGORIES.find(cat => cat.id === catId);
return {
headerTitle: selectedCategory.title
}
};在这里，我试图从我的虚拟数据中提取标题，使用navigationOptions作为标题标题，但它不起作用。它根本不改变标题标题。
我在这里错过了什么？我怎么才能解决这个问题？
PS.我使用的是5
编辑:我在一个MealsNavigator.js文件中组织我的所有导航，然后在App.js文件上呈现所有内容：
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';
import Colors from '../constants/colors';
const MealsNav = createStackNavigator();
const MealsNavigator = () => {
return (
<NavigationContainer>
<MealsNav.Navigator
screenOptions={{
headerStyle: {
backgroundColor: Colors.primaryColor,
},
headerTintColor: '#fff',
headerTitleStyle: {
fontSize: 17
}
}}
>
<MealsNav.Screen
name="Categories"
component={CategoriesScreen}
options={{
title: 'Meals Categories'
}}
/>
<MealsNav.Screen name="CategoryMeals" component={CategoryMealsScreen} />
<MealsNav.Screen name="MealDetail" component={MealDetailScreen} />
</MealsNav.Navigator>
</NavigationContainer>
);
};
export default MealsNavigator;回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-17 03:40:19
对于导航version5，您可以在创建堆栈时执行以下操作，您可以提供以下选项
<Stack.Screen
name="CategoryMealsScreen"
component={CategoryMealsScreen}
options={({ route }) => {
const catId = route.params.categoryId;
const selectedCategory = CATEGORIES.find((cat) => cat.id === catId);
return {
title: selectedCategory.title,
};
}}
/>更新
您可以使用以下静态选项
<Stack.Screen
name="CategoryMealsScreen"
component={CategoryMealsScreen}
options={CategoryMealsScreen.navigationOptions}
/>;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62946646
复制相关文章
相似问题
腾讯云开发者
