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

Question

我正在构建我的第一个 react-native 应用程序，我已经成功创建了我的登录屏幕和登录表单组件(以及我想要导航到的空白启动屏幕 Splash.js)

因此，使用 touchableOpacity 实例作为按钮时，表单功能齐全。我现在不尝试验证用户名和密码，但我希望我的登录 touchableOpacity 导航到初始屏幕。

我刚刚成功安装了 react-navigation、react-navigation-stack 和 react-native-gesture-handler 但我只是在我的 App.js 文件上导入了导航，现在我的登录页面出现了出现错误 TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')

所以现在是完全控制我的导航问题的好时机，这样我以后就不必再处理它了。我到底做错了什么，我该如何纠正这个问题，以便我的 loginForm 可触摸导航到我的初始屏幕？

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

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

代码中有两处错误，首先是在 App.js 中，您正在使用 createAppContainer 创建一个 AppContainer，它将通过navigation 支持您拥有的所有屏幕，还负责切换 Activity 屏幕，因此与其返回 LoginScreen，不如返回 AppNavigator。

App.js

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

现在您应该可以在屏幕上访问导航 Prop ，但是由于您在 LoginScreen 中也有 LoginForm，导航 Prop 将不会从 传递LoginScreen 到 LoginForm 所以你要么必须像这样手动传递它:

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

或

您可以使用 react-navigation 提供的方便的 HOC，称为 withNavigation，这会将导航 Prop 传递给任何组件。

import { withNavigation } from 'react-navigation';

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

export default withNavigation(LoginForm);