获取未定义不是评估navigation.navigate的对象

qltillow  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(294)

我使用此<touchableopacity onpress={()=>navigation.navigate('signinscreen')}>打开其他页面,但当我在照片页面中单击<touchableopacity onpress={()=>navigation.navigate('signinscreen')}>时,出现以下错误:
在此处输入图像描述
守则:

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, Dimensions, StyleSheet, StatusBar, Image} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import * as Animatable from 'react-native-animatable';
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/fmasdeco.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;

我的页面signupscreen.js

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

export default function SignUpScreen() {
    return (
        <View>
            <Text>Hello</Text>
        </View>
    )
}

const styles = StyleSheet.create({})
szqfcxe2

szqfcxe21#

当您从不在导航容器中的组件导航时,您的导航道具未定义您的splashscreen组件不在导航容器中可能是屏幕的子组件,这就是为什么您无法从渲染splashscreen的父组件获取导航道具通行证导航。

您应该使用react navigation提供的导航钩子,从导航容器外部在屏幕之间导航。。。。

import { useNavigation } from '@react-navigation/native';

const someComponent = () => { 
  const navigation = useNavigation();

            <TouchableOpacity onPress={()=>navigation.navigate('SignInScreen')}>
               <Text>Navigation To Sigin Screen</Text>
            </TouchableOpacity>
}

希望这会有帮助。。。

相关问题