在React native中获得不变违规。实施启动画面

时间:2019-11-17 15:48:54

标签: react-native

我是新来的响应本机的人,我在实现启动屏幕时遇到了一些困难,因此我想向大家展示一下,也许有人会有所帮助。

https://postimg.cc/ftf0psfy

我收到该错误。但目前我真的不知道我在哪里犯错,我的代码看起来像这样

App.js

import {
  createAppContainer,
  createSwitchNavigator,
  createDrawerNavigator
 } from 'react-navigation';

 import Splashscreen from './components/Splashscreen';
 import Login from './components/Login'

 const HomeNavigator = createDrawerNavigator({
  Splash: Splashscreen,
  Home: Login,
 });   
 const RouteConfigs = {
  SplashScreen: {
  screen: Splashscreen
 },
 Home: {
  screen: Login
 }
};

const AppNavigator = createSwitchNavigator(
 RouteConfigs,
 {
  initialRouteName: "SplashScreen"
 }
);

现在我的启动画面代码如下:

Splashscreen.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image , ActivityIndicator, Dimensions, Modal } from 'react-native';

export default class Splashscreen extends Component{

    componentDidMount()
    {
        setInterval(() => {
          this.props.navigation.navigate('Login')  
        }, 4000);
    }

render(){
    return(
        <View style={styles.container}>
        <Image
            source={{uri: 'http://peopleweb.freeasphost.net/d4b0e7d1-6c0e-4e48-a4cb-0f1c26af81fe_200x200.png'}}
         style={styles.logo} />
        </View>
        );
    }

}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent :"center",
        alignItems:"center"
    },
    logo:{
    width:150,
    height:150
},
});

以及稍后将重定向的登录页面

Login.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View , TextInput, TouchableOpacity} from 'react-native';

export default class Login extends Component{

render(){
    return(
        <View style={styles.container}>
        <TextInput
        placeholder = "Username"
        style={styles.input}
        />

        <TextInput
        placeholder = "Password"
        style={styles.input}
        />

        <TouchableOpacity style={styles.button} onPress={this.login}>
        <Text style={styles.loginbtn}> Login </Text>
         </TouchableOpacity>
        </View>
        );
    }

}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        justifyContent :"center",
        alignItems:"center"
    },

    input:{
        width:200,
        margin:10
    },

    button:{
        width:200,
        padding:10,
        backgroundColor:'#009999',
        alignItems: 'center'
    },

    loginbtn:{
        color:'#ffff'
    }
});

我确实需要有关我在做什么的指南。错误可能是什么?我是新来的

0 个答案:

没有答案