Question

我不知道为什么会得到

＆＃34; undefined不是一个对象（评估＆＃39; _this.props.navigation.navigate＆＃39;）＆＃34;

我是新的反应，但我已经完成了每个可能的解决方案，但仍然犯这个错误。我在下面分享我的代码：

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './app/components/Login/Login';
import Dashboard from './app/components/Dashboard/Dashboard';
import {StackNavigator} from 'react-navigation';

const Application = StackNavigator({
        Home: { screen: Login },
        Dashboard: { screen: Dashboard },
    }, {
        navigationOptions: {
            header: false
        }
});

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Login.js

import React from 'react';
import { StyleSheet, View, Image, Text, TextInput, KeyboardAvoidingView } from 'react-native';
import LoginForm from './LoginForm';
import {StackNavigator} from 'react-navigation';

export default class Login extends React.Component {

    render() {
        return (
            <KeyboardAvoidingView behavior='padding' style={styles.container}>
                <View style={styles.logoContainer}>
                    <Image source={require('../../images/logo.png')}
                           style={styles.logo}
                    />
                </View>
                <Text style={styles.title}>Share Emotions Instantly..</Text>
                <View style={styles.formContainer}>
                    <LoginForm></LoginForm>
                </View>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#bdc3c7',
        alignItems: 'center',
        justifyContent: 'center',
    },

    logoContainer: {
        alignItems: 'center',
        justifyContent: 'center'
    },

    logo: {
        width: 70,
        height: 70
    }
});

LoginForm.js

import React from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity, Text, Alert } from 'react-native';
import Dashboard from '../Dashboard/Dashboard';
import {StackNavigator} from 'react-navigation';

export default class LoginForm extends React.Component {

    constructor(props) {
        super(props);
    }

    onButtonPress = () => {
        alert('ok');
        const { navigate } = this.props.navigation;
        navigate('Dashboard');
    }

    render() {
        return (
            <View style={styles.container}>
                <TextInput underlineColorAndroid="transparent" 
                           style={styles.input} 
                           placeholder="username or email" 
                           placeholderTextColor='rgba(255,255,255,0.5)'
                           returnKeyType="next"
                           keyboardType="email-address"
                           autoCapitalize="none"
                           autoCorrect={false}
                           onSubmitEditing={() => this.passwordInput.focus()}>
                </TextInput>

                <TextInput underlineColorAndroid="transparent" 
                           style={styles.input} 
                           placeholder="password" 
                           placeholderTextColor='rgba(255,255,255,0.5)'
                           returnKeyType='go'
                           ref={(input) => this.passwordInput = input}
                           secureTextEntry> 
                </TextInput>

                <TouchableOpacity style={styles.buttonContainer}
                                  onPress={this.onButtonPress}>
                    <Text style={styles.buttonText}>Login</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 20
    },

    input: {
        height: 40,
        marginBottom: 15,
        backgroundColor: 'rgba(255,255,255,0.2)',
        paddingHorizontal: 10,
        width: 300
    },

    buttonContainer: {
        backgroundColor: '#888',
        paddingVertical: 10
    },

    buttonText: {
        textAlign: 'center',
        color: '#fff',
        fontWeight: '700'
    }
});

Dashboard.js

import React from 'react';
import { StyleSheet, View } from 'react-native';
import {StackNavigator} from 'react-navigation';

export default class Dashboard extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>this is Dashboard</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

我知道这是一个常见的问题，但我仍然没有理解为什么导航＆＃39;对象没有作为道具传递给其他组件。

Answer 1

导航属性将被注入到您添加到ScreenNavigator的路径配置的所有屏幕中（在您的案例中为Home和Dashboard）。但是，对于这些屏幕的子组件，您必须传递导航属性。

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

undefined不是一个反应原生的对象

1 个答案: