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

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 导航到我的启动屏幕？

App.js

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

登录.js

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

LoginForm.js

import React, { Component } from 'react';
    import {StyleSheet, View, TextInput, Text, TouchableOpacity, StatusBar} from 'react-native';

    export default class LoginForm extends Component {
        render() {
            const {navigate} = this.props.navigation;
            return (
                <View style={styles.container}>
                    <StatusBar 
                        barStyle="light-content"
                    />
                    <TextInput 
                        placeholder="Email"
                        placeholderTextColor="rgba(255,255,255,0.7)"
                        returnKeyType="next"
                        onSubmitEditing={() => this.passwordInput.focus()}
                        keyboardType="email-address"
                        autoCapitalize="none"
                        autoCorrect={false}
                        style={styles.input}
                    />
                    <TextInput 
                        placeholder="Password"
                        placeholderTextColor="rgba(255,255,255,0.7)"
                        returnKeyType="go"
                        secureTextEntry
                        style={styles.input}
                        ref={(input) => this.passwordInput = input}
                    />

                    <TouchableOpacity 
                        onPress={() => navigate('Splash')} 
                        style={styles.buttonContainer}>

                        <Text style={styles.buttonText}>
                            LOGIN
                        </Text>
                    </TouchableOpacity>

                </View>
            );
        }
    }

Answer 1

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

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

Answer 2

代码中有两处错误，首先是在App.js 中，您正在使用createAppContainer 创建一个AppContainer，它会将导航道具向下传递到您拥有的所有屏幕，并且还负责切换活动屏幕，所以与其返回LoginScreen，不如返回AppNavigator。

App.js

export default class MMH_App_Final extends Component{
  render() {
    const App = createAppContainer(MainNavigator);
    return(
      <App />
    );
  }
}

现在您应该能够访问屏幕中的导航道具，但由于您在 LoginScreen 中也有 LoginForm，因此导航道具不会从 LoginScreen 传递到 LoginForm，因此您要么必须像这样手动传递它：

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

或

您可以使用react-navigation 提供的名为withNavigation 的便捷 HOC，它将导航道具传递给任何组件。

import { withNavigation } from 'react-navigation';

class LoginForm extends Component {
  render() {
    return (/*Components*/);
  }
}

export default withNavigation(LoginForm);