找不到变量:尝试从堆栈导航器内部进行导航时出现导航错误

时间:2020-07-03 11:30:17

标签: reactjs react-native react-navigation

我添加了一个标题按钮,当我单击该按钮时,我想转到应用程序中的特定屏幕,这是代码:

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>
  );
}

如您所见,当单击标题按钮时,我想去创建订单页面,但出现错误消息“找不到变量:导航”。感谢您的反馈!

1 个答案:

答案 0 :(得分:1)

它一定不能在headerRight内部获取导航,因此您可以尝试以下建议

401