反应本机 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 undefined

无法通过大量操作解决 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。

谢谢大家的宝贵意见，从你们那里学到了很多东西

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

React native this.props.navigation.navigate undefined

android

react-native

react-navigation

react-navigation-stack