反应本机this.props.navigation.Navigate未定义

Question

navigation.js

       import React,{ Component} from 'react'
import { createStackNavigator,createAppContainer } from 'react-navigation'
import  Login  from './screens/login'
import  SplashScreen  from './screens/splashScreen'
// export const Nav = createStackNavigator({
//     splashScreen: {  screen: SplashScreen  },
//     loginScreen: {  screen:Login  },
// },{ initialRouteName: 'splashScreen' })
// export default createAppContainer(Nav);
const Nav = createStackNavigator({
    loginScreen: { screen: Login },
     splashScreen: {screen: SplashScreen},
    { 
        initialRouteName: 'splashScreen',
    }
})
export default createAppContainer(Nav);

splashscreen.js

 import React, { Component } from "react";
 import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { appContainer  } from '../styleSheet'
import { Nav }  from  '../navigations'
import { createStackNavigator,createAppContainer } from 'react-navigation'
class SplashScreen extends Component {
componentWillMount(){
    setTimeout(() => {
       // alert('I will redirect')
        this.props.navigation.navigate("loginScreen");
    }, 3000);
}
    render() {
        return (
            <View style={appContainer.AppContainer}>
               <Text style={appContainer.splashSC}> Who Around Me  </Text>
            </View>
        )
    }
}
 export default SplashScreen

login.js

import React, { Component } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { appContainer,buttons } from '../styleSheet'
class Login extends Component {
    render() {
        return (
                <View style={appContainer.AppContainer}>
                    <Text style={buttons.loginBtnText}>
                        Login with Sim
                    </Text>
                </View>
        )
    }
}
export default Login

app.js

  /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import  SplashScreen  from './screens/splashScreen'
import { createStackNavigator,createAppContainer } from 'react-navigation'
import  Login  from './screens/login'
import { Nav }  from  './navigations'
const App = () => (
  <Nav  />
);
export default App;

index.android.js

import React, { Component } from "react";
 import { AppRegistry } from "react-native";
import { createStackNavigator,createAppContainer } from 'react-navigation'
import App from "./src/App";
 AppRegistry.registerComponent("WhoAroundMe", () => App);

this.props.navigation.navigate（" loginscreen"）; 抛出错误

this.props.navigation.navigate不确定的

无法通过大量的Google来解决。

任何帮助。谢谢

Answer 1

我无法清楚地理解问题，但是您可以尝试在navigation.js中的createStackNavigator()中添加splashscreen

const StackNavigator = createStackNavigator({
    loginScreen: { screen: Login },
    splashScreen: {screen: SplashScreen},
    { 
        initialRouteName: 'splashScreen',
    }
})
export default createAppContainer(StackNavigator);

在您的app.js文件中替换为：

const App = () => (
  <Nav />  //instead of SplashScreen
);

Answer 2

这是因为您的飞溅组件不是被声明为反应范围的路线。创建路线时，可以将SplashScreen作为路线放置并将其设置为初始路由名称。

export const Nav = createStackNavigator(
  {
    splashScreen: {
      screen: SplashScreen
    },
    loginScreen: {
      screen:Login
    }
  },
  {
    initialRouteName: 'splashScreen'
  }
)

Answer 3

在调用splashscreen组件

时通过{... props}

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import  SplashScreen  from './screens/splashScreen'
import { createStackNavigator,createAppContainer } from 'react-navigation'
import  Login  from './screens/login'
import { Nav }  from  './navigations'
const App = () => (
  <SplashScreen {...props} />
);
export default App;

Answer 4

尝试实现此

app.js

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import SplashScreen from "./splashScreen";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Nav from "./navigations";<----changes-----
export default class App extends Component {
  render() {
    return (
      <Nav />
    );
  }
}

nav.js

import React, { Component } from "react";
import { createStackNavigator, createAppContainer } from "react-navigation";
import Login from "./login";
import SplashScreen from "./splashScreen";
//<------replace your code from here
const Nav = createStackNavigator(
  {
    loginScreen: { screen: Login },
    splashScreen: { screen: SplashScreen }
  },
  {
    initialRouteName: "splashScreen"
  }
);
export default createAppContainer(Nav);

Answer 5

主要问题是我在屏幕文件中导入navigations.js。

感谢您的宝贵评论，我从兄弟那里学到了很多东西