Question

我真的无法让我的导航工作。我正在使用react-navigation（v2）。我认为LoginForm中的道具结构存在问题，但我无法弄清楚它是什么。

我真的不知道我现在能做些什么。几个小时以来一直在努力。

提前致谢！

App.js

import React from 'react';
import { createStackNavigator, createSwitchNavigator } from "react-navigation";
import { StyleSheet, Text, View } from 'react-native';

import LoginScreen from './app/screens/LoginScreen'
import DashboardScreen from './app/screens/DashboardScreen'

const AppNavigator = createStackNavigator({
Login: { screen: LoginScreen },
Dashboard: { screen: DashboardScreen }
}, {
   initialRouteName: 'Login'
  }
);

export default class App extends React.Component {
render() {
   return <AppNavigator />;
  }
};

LoginScreen.js

import React from "react";
import {
   StyleSheet,
   Text,
   View,
   StatusBar,
   TouchableOpacity
} from "react-native";


import Logo from "../components/Logo";
import LoginForm from "../components/LoginForm";


export default class LoginScreen extends React.Component {

    render() {
        return (
             <View style={styles.loginContainer}>
                 <Logo />
                 <LoginForm />
             </View>
        );
    }
}

const styles = StyleSheet.create({
    loginContainer: {
        backgroundColor: "#6200EE",
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    }
});

LoginForm.js

import React, { Component } from 'react';

import {
    StyleSheet,
    Text,
    KeyboardAvoidingView,
    TextInput,
    Alert,
    TouchableOpacity,
} from "react-native";


export default class LoginForm extends React.Component {
    render() {
        return (
            <KeyboardAvoidingView style={styles.loginFormContainer} behavior="padding" enabled>
                <TextInput style={styles.inputBox} underlineColorAndroid="rgba(0,0,0,0)" placeholder="SGID" placeholderTextColor="rgba(255, 255, 255, 0.7)" selectionColor="#fff" onSubmitEditing={() => this.password.focus()} />
                <TextInput style={styles.inputBox} underlineColorAndroid="rgba(0,0,0,0)" placeholder="Password" secureTextEntry={true} placeholderTextColor="rgba(255, 255, 255, 0.7)" ref={input => (this.password = input)} />
                <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate("Dashboard")}>
                    <Text style={styles.buttonText}>Login</Text>
                </TouchableOpacity>
            </KeyboardAvoidingView>;
    }
}

const styles = StyleSheet.create({
     loginFormContainer: {
       flexGrow: 1,
       justifyContent: "center",
       alignItems: "center"
       },

     inputBox: {
       width: 300,
       backgroundColor: "rgba(255, 255,255,0.2)",
       borderRadius: 25,
       paddingHorizontal: 16,
       fontSize: 16,
       color: "#ffffff",
       marginVertical: 10
       },
     button: {
       width: 300,
       backgroundColor: "#3700B3",
       borderRadius: 25,
       marginVertical: 10,
       paddingVertical: 13
       },
     buttonText: {
       fontSize: 16,
       fontWeight: "500",
       color: "#ffffff",
       textAlign: "center"
       }
});

DashboardScreen.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default class DashboardScreen extends React.Component {
    render() {
        return (
            <Text>Dashboard</Text>
        )
    }
};

Answer 1

您需要将导航道具从LoginScreen传递到LoginForm：

export default class LoginScreen extends React.Component {
    render() {
        return (
             <View style={styles.loginContainer}>
                 <Logo />
                 <LoginForm navigation={this.props.navigation} />
             </View>
        );
    }
}

导航道具仅适用于注册为屏幕的组件。在你的情况下登录屏幕和DashboardScreen

获取错误未定义不是对象（评估'_this2.props.navigation.navigate'） - React Native

1 个答案: