react-native 应用已经启动，现在添加导航

Question

我正在构建我的第一个 react-native 应用程序，并且我已经成功创建了我的登录屏幕和登录表单组件（以及我想要导航到的空白启动屏幕 Splash.js）因此，该表单具有作为按钮的 touchableOpacity 实例的完整功能。我现在不想验证用户名和密码，但我希望我的登录 touchableOpacity 导航到初始屏幕。我刚刚成功安装，react-navigation, react-navigation-stack and react-native-gesture-handler但我只是在我的 App.js 文件中进行了导航导入，现在我的登录页面出现了错误TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')所以现在是完全控制我的导航问题的好时机，这样我以后就不必解决它了。我到底做错了什么，我该如何纠正这个问题，以便我的 loginForm touchable 导航到我的启动画面？应用程序.jsimport React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View } from 'react-native';import Splash from './Splash';import Login from './src/components/Login/Login';import {createAppContainer} from 'react-navigation';import {createStackNavigator} from 'react-navigation-stack';const MainNavigator = createStackNavigator({  Home: {screen: Login},  Dash: {screen: Splash}});export default class MMH_App_Final extends Component{  render() {    const App = createAppContainer(MainNavigator);    return(      <Login />    );  }}登录.jsimport React, { Component } from 'react';import { StyleSheet, Text, Image,  View, KeyboardAvoidingView } from 'react-native';import LoginForm from './LoginForm';export default class Login extends Component{  render() {    return(      <KeyboardAvoidingView behavior="padding" style={styles.container}>        <View style={styles.logoContainer}>          <Image             style={styles.logo}            source={require('../../images/FINAL_MYMD_LOGO-1024x250.png')}          />          <Text>            An App for Health And Wellness          </Text>        </View>        <View style={styles.formContainer}>          <LoginForm />        </View>      </KeyboardAvoidingView>    );  }}

Answer 1

代码中有两处错误，第一件事是App.js您正在创建一个AppContainerusing createAppContainer，它将导航道具向下传递到您拥有的所有屏幕，并且还负责切换活动屏幕，因此LoginScreen您应该返回AppNavigator.

应用程序.js

export default class MMH_App_Final extends Component{

  render() {

    const App = createAppContainer(MainNavigator);

    return(

      <App />

    );

  }

}

现在您应该能够访问屏幕中的导航道具，但是由于您也有导航道具LoginForm内部LoginScreen不会从LoginScreento传递，LoginForm因此您必须手动将其传递给像这样：

<LoginForm navigation={this.props.navigation}/>

或者

你可以使用一个方便的 HOCreact-navigation调用withNavigationthis 将导航道具传递给任何组件。

import { withNavigation } from 'react-navigation';

class LoginForm extends Component {

  render() {

    return (/*Components*/);

  }

}

export default withNavigation(LoginForm);

Answer 2

呈现应用程序。实际上容器负责管理您的应用程序状态并将您的顶级导航器链接到应用程序环境。

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View } from 'react-native';

import Splash from './Splash';

import Login from './src/components/Login/Login';

import {createAppContainer} from 'react-navigation';

import {createStackNavigator} from 'react-navigation-stack';

const MainNavigator = createStackNavigator({

  Home: {screen: Login},

  Dash: {screen: Splash}

});

export default class MMH_App_Final extends Component{

  render() {

    const App = createAppContainer(MainNavigator);

    return(

      <App/>

    );

  }

}