反應原生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組件未在react-navigation中聲明為路由。 創建路線時，可以將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。

謝謝大家的寶貴意見，我從兄弟們那里學到了很多東西