如何在反应导航中导航和传递同一组件的道具？

Question

I tried to navigate my App component to GamePlay component, here's my App.js looks like.

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';


// Import my own components
import GamePlay from './components/GamePlay';
import {data} from './components/Stage/Stage';

const Stack = createStackNavigator();


export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false
          }}
        > 

            <Stack.Screen name="Game Play">
              {() => <GamePlay data={data}/>}
            </Stack.Screen>
        
        </Stack.Navigator>
      </NavigationContainer>
  );
}

and this is my GamePlay component looks like.

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default function GamePlay({navigation}, props) {

    const ToHome = () => {
        navigation.navigate("Home Screen")
    }

    return (
        <View>
            <TouchableOpacity onPress={ToHome}>
                <Text>Go Home</Text>
            </TouchableOpacity>
            <View>
                <Text>this is gameplay</Text>
            </View>
        </View>
    )
}

but why when I do console.log(props.data) in the GamePlay component It says undefined ? I'm confuse how to pass navigation with props in a component.

Answer 1

Small working example: Expo snack

try this:

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default 
function GamePlay({navigation, data}) {
    console.log(data)
    const ToHome = () => {
        navigation.navigate("Home Screen")
    }

    return (
        <View>
            <TouchableOpacity onPress={ToHome}>
                <Text>Go Home</Text>
            </TouchableOpacity>
            <View>
                <Text>this is gameplay</Text>
            </View>
        </View>
    )
}

also avoid keeping space while naming screens.

Answer 2

I'm guessing you're trying to pass props from when you declare the route in the stack.

You can use initialParams for that like so:

<Stack.Screen component={GamePlay} name="GamePlay" initialParams={{data:data}} />

then write your GamePlay component as such:

 import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; export default function GamePlay({navigation, route}, props) { const ToHome = () => { navigation.navigate("Home Screen") } return ( <View> <TouchableOpacity onPress={ToHome}> <Text>Go Home</Text> </TouchableOpacity> <View> <Text>this is gameplay</Text> </View> </View> ) }

and console.log(route.params). Should work just fine.

Answer 3

navigation.navigate("Home Screen",{param1:'123456'})

Answer 4

try to put {navigation,data} insted of {navigation}, props)