0

导航.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);

闪屏.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

登录.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

应用程序.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 未定义

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

任何帮助表示赞赏。谢谢

4

5 回答 5

3

我不能清楚地理解这个问题，但你可以尝试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
);
于 2019-03-08T06:30:58.663 回答
2

这是因为您的 SplashScreen 组件未在 react-navigation 中声明为路由。创建路由时，可以将 SplashScreen 作为路由并将其设置为初始路由名称。

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

于 2019-03-08T07:48:40.830 回答
2

调用 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;
于 2019-03-08T09:41:46.220 回答
1

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

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

于 2019-03-08T10:39:59.063 回答
1

尝试实现这一点

应用程序.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 />
    );
  }
}

导航.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);
于 2019-03-08T09:51:33.160 回答