Реагировать на собственный функциональный компонент navigationOptions headerRight не устанавливается - PullRequest
Новая
       25

Реагировать на собственный функциональный компонент navigationOptions headerRight не устанавливается

0 голосов
/ 15 апреля 2020

Ранее я установил параметр headerRight в компоненте root, который отображает дочерний компонент с параметрами экрана, такими как 

export default function App() {
  return (
    <RecipeProvider>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Recipes">
          <Stack.Screen
            name="Recipes"
            component={RecipeList}
            options={({ navigation }) => ({
              headerRight: () => (
                <TouchableOpacity
                  style={styles.button}
                  onPress={() => navigation.navigate("New Recipe")}
                >
                  <FontAwesomeIcon icon={faPlus} size={20} />
                </TouchableOpacity>
              ),
            })}
          />

, и теперь я хотел бы переместить headerRight внутри определения компонента (поэтому я не заканчивайте с огромным файлом приложения с деталями, которые относятся только к самим компонентам экрана)

Я прочитал другие решения и попробовал следующее 

export default function RecipeList({ navigation }) {
  const { recipes } = useContext(RecipeContext);

  return (
    <View style={styles.container}>
      <FlatList
        numColumns={2}
        data={recipes}
        keyExtractor={(recipe: Recipe) => recipe.id}
        renderItem={({ item }) => {
          return (
            <RecipeItem
              name={item.name}
              minutes={item.minutes}
              image={item.image}
              title="Go to Detail Screen"
              onPress={() => {
                navigation.navigate("Recipe Details", { item });
              }}
            />
          );
        }}
      />
    </View>
  );
}

RecipeList.navigationOptions = ({ navigation }) => ({
  headerRight: () => (
    <TouchableOpacity
      style={styles.button}
      onPress={() => navigation.navigate("New Recipe")}
    >
      <FontAwesomeIcon icon={faPlus} size={20} />
    </TouchableOpacity>
  ),
});

Но кнопка headerRight больше не показывает ... есть идеи?

Спасибо всем <3 </p>

1 Ответ

0 голосов
/ 15 апреля 2020

Мой headerRight ниже, и он работает для меня 

EditScreen.navigationOptions = navData => {
 const submitFn = navData.navigation.getParam('submit');
  return {
    headerTitle: 'Edit Data'
    headerRight: (
     <HeaderButtons HeaderButtonComponent={HeaderButton}>
       <Item
         title="Save"
          iconName={
            Platform.OS === 'android' ? 'md-checkmark' : 'ios-checkmark'
          }
        onPress={submitFn}
      />
     </HeaderButtons>
    )
   };
 };
...