首页 > 解决方案 > 未处理的拒绝(TypeError):无法读取 react-native 中未定义的属性“调度”

问题描述

我在运行 react-native 应用程序时遇到问题。问题出在 Splash.js 页面上。我想在 2500s 之后移动到 Login2.js 页面但是,在 Splash.js 页面出现后出现错误:

未处理的拒绝(类型错误):无法读取未定义的属性“调度”

谁能帮我克服这个问题?这是脚本

飞溅.js:

import React, { Component } from 'react';
import { Text, View, StyleSheet, StatusBar, TouchableOpacity, Image, Dimensions, Animated } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import Wallpaper from '../components/Wallpaper';

export default class Splash extends Component {
    constructor(props) {
        super(props)

        this.state = {
            logonyaFade: new Animated.Value(0),
            tulisanFloat: new Animated.Value(0),
            width: Dimensions.get('window').width,
            height: Dimensions.get('window').height,
        }
        Dimensions.addEventListener('change', (e) => {
            this.setState(e.window);
        });
    }
    _start = () => {
        Animated.timing(this.state.logonyaFade, {
            toValue: 1,
            duration: 1000
        }).start();
    };
    componentWillMount() {
        console.disableYellowBox = true;
        setTimeout(async () => {
            this.props.navigation.dispatch(
                StackActions.reset(
                    {
                        index: 0,
                        actions: [
                            NavigationActions.navigate({ routeName: 'login2' }),
                        ]
                    }))
        }, 2500)
    }
    render() {
        return (
            <Wallpaper>
                <View style={[styles.bg, { width: this.state.width }]} onLayout={this._start}>
                    <Animated.View style={{ opacity: this.state.logonyaFade, width: 200, height: 200, alignSelf: 'center' }}>
                        <Image style={styles.logoasih} source={require('../images/logo.png')} />
                    </Animated.View>
                    <Animated.View style={{ opacity: this.state.logonyaFade }}>
                        <Text style={styles.textmotto}> "Bring Better Life To The World" </Text>
                    </Animated.View>
                </View>
            </Wallpaper>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#00BFFF',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

    bg: {
        flexDirection: 'column',
        alignSelf: 'center',
        flex: 1,
        justifyContent: 'center'
    },

    imgsplash: {
        alignContent: 'center',
        alignItems: 'center',
        justifyContent: 'center',

    },

    signupTextCont: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        paddingVertical: 16,
        flexDirection: 'row'
    },

    signupText: {
        color: 'rgba(255,255,255, 0.7)',
        fontSize: 16,
        paddingVertical: 30,
        marginVertical: 30
    },

    signupButton: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: '500'
    },

    logoasih: {
        width: 200,
        height: 200,
        alignSelf: 'center',
    },

    textmotto: {
        fontSize: 20,
        color: '#015c6f',
        fontStyle: 'italic',
        lineHeight: 43.2,
        alignSelf: 'center',
    }
});

这是来自 Routes.js 的脚本:

import {Router, Stack, Scene} from 'react-native-router-flux';

import Splash from './pages/Splash';
import Login2 from './pages/Login2';

export default class Routes extends Component{
    render(){
        return(
            <Router>
            <Scene key="root" hideNavBar={true} initial={true}>
                <Scene key ="splash" component={Splash} title="Splash"/>
                <Scene key ="login2" component={Login2} title="Login2"/>
            </Scene>
            </Router>
        )
    }
}

希望这个问题可以尽快解决..谢谢。

标签: react-nativeruntime-errorreact-navigationreact-native-router-fluxreact-navigation-stack

解决方案


这个问题是由于您没有在 Stack navigator 中添加 Splash 组件,或者如果您还没有添加您正在调用的地方,假设<Splash />您忘记将导航作为道具传递。

我建议在 Stack Navigator 中添加 Splash 或执行<Splash navigation={this.props.navigation} />

希望能帮助到你 。随时怀疑


推荐阅读