enter image description here

this is structure of project. i want to operate it: when is press ReportButton, navigate to ReportScreen with post's title parameter(props)

this is stack of App.js

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

this is tap navigator of mainscreen

<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>

this is part of ReportButton to navigate

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

this is part of ReportScreen

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

output of node.js console

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

CodePudding user response：

You are not passing props , when you do navigate , you pass 'params'

so you should do this in reportScreen :

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