无法读取未定义的属性导航

Question

我在尝试 navigate 到 SignInScreen

时收到此错误 cannot read the property of navigate

这是创建的启动画面

import React from 'react';
import { 
    View, 
    Text, 
    TouchableOpacity, 
    Dimensions,
    StyleSheet,
    StatusBar,
    Image
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import LinearGradient from 'react-native-linear-gradient';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '@react-navigation/native';

const SplashScreen = ({navigation}) => {
    const { colors } = useTheme();

    return (
      <View style={styles.container}>
          <StatusBar backgroundColor='#009387' barStyle="light-content"/>
        <View style={styles.header}>
            <Animatable.Image 
                animation="bounceIn"
                duraton="1500"
            source={require('../assets/logo.png')}
            style={styles.logo}
            resizeMode="stretch"
            />
        </View>
        <Animatable.View 
            style={[styles.footer, {
                backgroundColor: colors.background
            }]}
            animation="fadeInUpBig"
        >
            <Text style={[styles.title, {
                color: colors.text
            }]}>Stay connected with everyone!</Text>
            <Text style={styles.text}>Sign in with account</Text>
            <View style={styles.button}>
                
            <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
                <LinearGradient
                    colors={['#08d4c4', '#01ab9d']}
                    style={styles.signIn}
                >
                    <Text style={styles.textSign}>Get Started</Text>
                    <MaterialIcons 
                        name="navigate-next"
                        color="#fff"
                        size={20}
                    />
                </LinearGradient>
            </TouchableOpacity>
            </View>
        </Animatable.View>
      </View>
    );
};

export default SplashScreen;

这是主要的 App.js 文件，它是根文件

 const Drawer = createDrawerNavigator();

// const [isEnabled, setIsEnabled] = React.useState(false);


export default function App() {

  return (
    <PaperProvider theme={PaperDarkTheme}>
      <SplashScreen />
     
    </PaperProvider> 
  );
}

Answer 1

看起来你错过了包装主导航容器然后抽屉这可以工作：

    import * as React from 'react';
    import { Button, View } from 'react-native';
    import { createDrawerNavigator } from '@react-navigation/drawer';
    import { NavigationContainer } from '@react-navigation/native';
    
    
    const Drawer = createDrawerNavigator();
    
    // const [isEnabled, setIsEnabled] = React.useState(false);
    
    
    export default function App() {
    
      return (
        <PaperProvider theme={PaperDarkTheme}>
         <NavigationContainer>
          <Drawer.Navigator initialRouteName="splash">
             <Drawer.Screen name="splash" component={SplashScreen } />
              {// other Screens}
          </Drawer.Navigator>
         </NavigationContainer>
         
        </PaperProvider> 
      );
    }

无法读取未定义的 属性 导航

cannot read property navigate of undefined

react-native

react-navigation

无法读取未定义的属性导航