每当我使用 props.navigation.navigate('Game') 时，在 HeaderBackButton.tsx 中反应本机导航问题

Question

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined, You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at HeaderBackButton.tsx:152.

My code is the following:

 const Home: FunctionComponent<HomeProps> = (props: HomeProps) => { return ( <View style={styles.container}> <View> <Text>{"Listo para jugar Cuarenta? "}</Text> </View> <View style={styles.button}> <Button title="Rules" onPress={() => { console.log("Props", props); props.navigation.navigate('Cuarenta'); }}/> </View> <View style={styles.button}> <Button title="New Game" onPress={() => { props.navigation.navigate('Game'); }}></Button> </View> <View style={styles.button}> <Button title="Tablero" onPress={() => { props.navigation.navigate('Tablero'); }}></Button> </View> <View style={styles.button}> <Button title="Robot" onPress={() => { props.navigation.navigate('RobotScene'); }}></Button> </View> </View> ) }

 export default function App() { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: '#f41e9e', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }} > <Stack.Screen name='Home' component={Home} options={{title: 'Juego de Cuarenta'}} /> <Stack.Screen name='Cuarenta' component={Cuarenta} /> <Stack.Screen name='Game' component={GameScene} /> <Stack.Screen name='Tablero' component={Tablero} /> <Stack.Screen name='RobotScene' component={RobotScene} /> </Stack.Navigator> </NavigationContainer> ); }

Answer 1

I solve this by rolling back to expo 38.0.8(the original version of my project).

Answer 2

I ran into the same problem updating react-navigation :

@react-navigation/native  ^5.7.2  →  ^5.7.3
@react-navigation/stack   ^5.8.0  →  ^5.9.0

Reverting back fixes the problem for now.

Answer 3

In my case the new version (5.7.2+?) of @react-navigation/stack was the reason. So just run npm i @react-navigation/stack@5.7.1 for fix it