Can’t find variable: navigation error when trying to navigate inside from inside the stack navigator

问题

I've added a header button and I'd like to go to a specific screen in my app when I click on that button, here's the code:

function ActionBarIcon(props) {
  return (
    <TouchableOpacity onPress={props.onPress}>
      <Image
        source={{uri : 'https://static.thenounproject.com/png/261370-200.png'}}
        style={{ width: 30, height: 30, marginRight : 15 }} />
    </TouchableOpacity>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Orders">

        <Stack.Screen name="Orders" component={HomePage} options = {{
          headerRight : props => <ActionBarIcon {...props}
          onPress={() => {
            navigation.navigate('Create Order')
          }} />
        }}/>

        <Stack.Screen name="Order Details" component={DetailsPage} />
        <Stack.Screen name="Create Order" component={CreateOrderPage} />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

As you can see, I want to go to create order page, when the header button is clicked but I'm getting an error saying "Can’t find variable: navigation". I appreciate your feedback!

回答1:

It must not be getting navigation inside headerRight, so you may try the below suggestion

 <Stack.Screen name="Orders" component={HomePage} options={({ navigation, route }) => ({
      headerRight: props => <ActionBarIcon {...props}
          onPress={() => {
            navigation.navigate('Create Order') 
          }} />
    })}

    />

来源：https://stackoverflow.com/questions/62714514/can-t-find-variable-navigation-error-when-trying-to-navigate-inside-from-inside