Невозможно установить заголовок динамически в реагировать родной - PullRequest
Новая
       4

Невозможно установить заголовок динамически в реагировать родной

1 голос
/ 31 января 2020

Я пытаюсь динамически изменить заголовок заголовка экрана нового компонента, но получаю следующую ошибку: 

TypeError: TypeError: undefined is not an object (evaluating 'navigationData.navigation.getParam')
* screens\CategoryMealsScreen.js:26:42 in navigationOptions
* screens\CategoryMealsScreen.js:10:40 in CategoryMealsScreen
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:9473:27 in renderWithHooks
- node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:11994:6 in mountIndeterminateComponent

Мой код: 

import React from "react";
import { Text, View, StyleSheet, Button } from "react-native";
import { CATEGORIES } from "../data/dummydata";
import Colors from "../constans/Colors";
let titleHeader = "";
const CategoryMealsScreen = props => {
  const categoryId = props.navigation.getParam("categoryId");

  const selectedCategory = CATEGORIES.find(cat => cat.id === categoryId);
  CategoryMealsScreen.navigationOptions(selectedCategory.title);
  // console.log(Object.keys(props.navigation));
  titleHeader = selectedCategory.title;
  return (
    <View style={styles.screen}>
      <Text>{selectedCategory.title}</Text>

      <Button
        title="Meals Details"
        onPress={() => props.navigation.navigate("MealsDetail")}
      />
    </View>
  );
};

CategoryMealsScreen.navigationOptions = navigationData => {
  const catId = navigationData.navigation.getParam("categoryId");
  const selectedCategory = CATEGORIES.find(cat => cat.id === catId);
  // console.log(catId);
  // console.log(navigationData.navigation.getParam("categoryId"));
  return {
    headerTitle: selectedCategory.title,
    headerStyle: {
      backgroundColor: Colors.primaryColor
    },
    headerTintColor: "white"
  };
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignContent: "center"
  }
});

export default CategoryMealsScreen;

Я пытался консоль журнала catId и он показывает вывод в консоли, но ошибка остается.

Я могу получить данные с getParam внутри компонента, но не в CategoryMealsScreen.navigationOptions

Некоторые из-за проблемы с bable Конфигурация, но она не работает, или я делаю что-то не так. Правильно, я не использую глобальную переменную titleHeader, чтобы изменить заголовок заголовка, и это работает, но это все еще хак.

GitHub

1 Ответ

1 голос
/ 31 января 2020

Проблема возникает из-за asyn c задача как поиск CATEGORIES.find(cat.. This will take a time to complete

Решение : используйте async / await с вашей функцией которые ждут завершения вашей задачи. 

We can set title dynamically using navigationOptions directly in stack configuration.  

CategoryMeals : {
    screen : CategoryMealsScreen,
    navigationOptions: ({ navigation }) => ({
          title : navigation.getParam('categoryId', 'CategoryMeals')
    }),
},
...