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
无法通过做很多谷歌来解决。
任何帮助赞赏。谢谢
我不能很清楚地理解这个问题,但你可以尝试在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
);
这是因为您的SplashScreen组件未在react-navigation中声明为路由。创建路径时,可以将SplashScreen作为路径并将其设置为初始路径名称。
export const Nav = createStackNavigator(
{
splashScreen: {
screen: SplashScreen
},
loginScreen: {
screen:Login
}
},
{
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;
尝试实现这一点
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);
主要问题是我在屏幕文件中导入navigations.js。
感谢所有宝贵的意见,我从兄弟那里学到了很多东西