Android React native this.props.navigation.navigate未定义_Android_React Native_React Navigation_React Navigation Stack

Android React native this.props.navigation.navigate未定义

android react-native

Android React native this.props.navigation.navigate未定义,android,react-native,react-navigation,react-navigation-stack,Android,React Native,React Navigation,React Navigation Stack,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 = cr

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);

 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

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

  /**
 * 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;

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);

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 />
    );
  }
}

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);

splashscreen.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);

 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

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

  /**
 * 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;

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);

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 />
    );
  }
}

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);

这个.props.navigation.navigate（“loginScreen”）抛出错误

this.props.navigation.navigate未定义

无法通过做很多谷歌来解决

谢谢你的帮助。

谢谢

我不能很好地理解这个问题，但是您可以尝试在

createStackNavigator（）中的navigation.js
文件中添加SplashScreen
const StackNavigator = createStackNavigator({
    loginScreen: { screen: Login },
    splashScreen: {screen: SplashScreen},
    { 
        initialRouteName: 'splashScreen',
    }
})
export default createAppContainer(StackNavigator);

在App.js文件中，替换为以下内容：
const App = () => (
  <Nav />  //instead of SplashScreen
);

const-App=（）=>(
//而不是溅屏
);
这是因为您的SplashScreen组件在react导航中未声明为路线。创建路由时，可以将SplashScreen作为路由，并将其设置为初始路由名称

export const Nav=createStackNavigator(
{
溅屏：{
屏幕：飞溅屏幕
},
登录筛选：{
屏幕：登录
}
},
{
initialRouteName:“splashScreen”
}
)
调用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;

import React，{Component}来自'React'；
从“react native”导入{平台、样式表、文本、视图}；
从“./screens/SplashScreen”导入SplashScreen
从“反应导航”导入{createStackNavigator，createAppContainer}
从“./screens/Login”导入登录名
从“/navigations”导入{Nav}
常量应用=（）=>(
);
导出默认应用程序；
尝试实现这一点
App.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);

 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

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

  /**
 * 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;

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);

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 />
    );
  }
}

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);

import React，{Component}来自“React”；
从“react native”导入{平台、样式表、文本、视图}；
从“/SplashScreen”导入SplashScreen；
从“react navigation”导入{createStackNavigator，createAppContainer}；
从“/navigations”导入导航 主要问题是我在屏幕文件中导入navigations.js
感谢各位宝贵的评论，我从各位兄弟那里学到了很多东西，上面说splashScreen必须是react组件。你在navigation.js中导入splashScreen了吗？是的，我也导入了splashScreen，但当我给initialRouteName时，它返回500个错误。我在帖子中添加了index.js文件代码，你能检查一下吗？它说splashScreen必须是react组件不工作，remove initialRouteName说splashScreen必须是react组件，否则如果add initialRouteName说initialRouteName附近有语法错误remove initialRouteName说splashScreen必须是react组件，否则，如果add initialRouteName在initialRouteName附近表示语法错误，您是否在导出const Nav=createStackNavigator（{loginScreen:{screen:Login}}）navigation.js文件中添加了splashScreen:{screen:splashScreen}？是的，在@piyushSorry给出答案后已更改为Nav，我已经重新更新了app.js和navigation.js文件，实际上我正在使用everyone解决方案来运行它anyway@Md.ParvezAlam我已经更新了我的答案，请检查并尝试我的帮助：）