带有负载 {"name":"Recette"} 的操作 'NAVIGATE' 没有被任何导航器处理

Question

我正在尝试在两个屏幕之间导航，但我不知道这里发生了什么。我需要一些帮助，谢谢。

App.js

const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                  headerShown: false
              }}
                initialRouteName={'Home'}
            >
                <Stack.Screen options={{headerShown: false}}name="Home" component={Tabs} />
                
                
            </Stack.Navigator>
        </NavigationContainer>
    )
}

export default App;`

Home.js

const Home = ({ navigation }) => {

    
    function renderRecetteList() {
        const renderItem = ({ item }) => (
            <TouchableOpacity
                
                onPress={() => navigation.navigate("Recette" )}
            >
               
            </TouchableOpacity>
        )

        return (
            <FlatList
                data={recette}
                keyExtractor={item => `${item.id}`}
                renderItem={renderItem}
                contentContainerStyle={{
                    paddingHorizontal: SIZES.padding * 2,
                    paddingBottom: 30
                }}
            />
        )
    }

    return(
        <SafeAreaView style = {styles.container}>
            {renderRecetteList()}
        </SafeAreaView>
        
    )
}

Recette.js

const Recette = ({ navigation }) => {
    return(
        <View>
            <Text>Search</Text>
        </View>
    )
}

export default Recette;

错误

The action 'NAVIGATE' with payload {"name":"Recette"} was not handled by any navigator.

Do you have a screen named 'Recette'?

Answer 1

您只能导航到在 React Navigator 中定义为 Screen 的组件。为了使用 navigate 转到 Recette，您需要像使用 Home.

一样将其定义为 Screen

const App = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                  headerShown: false
              }}
                initialRouteName={'Home'}
            >
...
                <Stack.Screen name="Recette" component={Recette} />
                
            </Stack.Navigator>
        </NavigationContainer>
    )
}

带有负载 {"name":"Recette"} 的操作 'NAVIGATE' 没有被任何导航器处理

The action 'NAVIGATE' with payload {"name":"Recette"} was not handled by any navigator

reactjs

react-native

expo