时间戳

首页 > 解决方案 > 使用参数反应标题中的本机导航按钮

reactjs - 使用参数反应标题中的本机导航按钮

问题描述

标题中有一个按钮，假设转到详细信息页面并发送参数。我遇到的问题是单击按钮时没有任何反应。你能帮忙吗？我不确定如何在标题中插入导航按钮并将参数传递到屏幕

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

标签： reactjsreact-nativereact-navigation

解决方案

您必须将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',
          });
        }}
      />
    ),
  })
/>

推荐阅读