React 本机堆栈导航器：如何传递参数？？我不能传递参数

Question

enter image description here

这是项目结构。我想操作它：当按下 ReportButton 时，使用 post 的标题参数（props）

导航到 ReportScreen

这是一叠 App.js

<NavigationContainer>
        <Stack.Navigator initialRouteName="Main">
          <Stack.Screen name="Main" component={MainScreen} />
          <Stack.Screen name="Report" component={ReportScreen} />
        </Stack.Navigator>
      </NavigationContainer>

这是主屏幕的点击导航器

<Tab.Navigator initialRouteName="Home" tabBarOptions={{showIcon: true}}>
      <Tab.Screen
        name="Main"
        options={{
          tabBarLabel: 'main',
          tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
          tabBarColor: 'blue',
        }}
        component={MapScreen}
      />
      <Tab.Screen
        name="Feed"
        options={{
          tabBarLabel: 'feed',
          tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
          tabBarColor: 'blue',
        }}
        component={FeedScreen}
      />
      <Tab.Screen
        name="Setting"
        options={{
          tabBarLabel: 'setting',
          tabBarIcon: ({color}) => <Icon name="home" color={color} size={24} />,
          tabBarColor: 'blue',
        }}
        component={SettingScreen}
      />
</Tab.Navigator>

这是要导航的 ReportButton 的一部分

    <TouchableOpacity
        style={postModalStyles.listButton} 
        onPress={()=>{console.log(post.title); navigation.navigate('Report', { title: post.title 
    });}}>
                <Text style={postModalStyles.text}>report</Text>
    </TouchableOpacity>

这是 ReportScreen 的一部分

const ReportScreen = ({title}) => {
   console.log(title);
   return(
     <View></View>
   );
}

node.js 控制台的输出

 LOG  hello world //log of reportbutton 's post.title
 LOG  undefined //log of reportscreen's post.title

Answer 1

你没有传递道具，当你导航时，你通过 'params'

所以你应该在 reportScreen 中这样做：

const ReportScreen = ({ navigation, route }) => {
   console.log(route.params?.title);
   return(
     <View></View>
   );
}

React 本机堆栈导航器：如何传递参数？？我不能传递参数

React native stack navigator : how to pass params?? i can't pass params

javascript

reactjs

react-native

react-navigation

react-props