Кнопка навигации React native в заголовке с параметрами

#reactjs #react-native #react-navigation

#reactjs #react-native #react-навигация

Вопрос:

В заголовке есть кнопка, которая предназначена для перехода на страницу сведений и отправки параметров. Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии кнопки ничего не происходит. Не могли бы вы помочь с этим. Я не уверен, как вставить кнопку навигации в заголовок и передать параметры на экран

 const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          
          headerRight: (navigation) => (
            <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
          ),
        }}
      />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
    </NavigationContainer>
  );
}

 

Ответ №1:

Вы должны передать navigation параметр в options реквизит экрана.

Попробуйте что-то вроде этого:

 <Stack.Screen
  name="Home"
  component={HomeScreen}
  options={({navigation}) => ({
    headerRight: () => (
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    ),
  })
/>