Question

我对React Native还是很陌生，现在我正在尝试构建一个Login组件，一旦登录成功，我想将该组件从Login屏幕重定向到主屏幕。我正在使用React Navigation，并且它一直在向我显示错误“无法读取未定义的属性'navigate'”。

我做错了什么还是只是错过了什么？非常感谢您的任何帮助！

我正在使用Visual Studio Code-Insiders（v1.37.0） npm -v：6.4.1 博览会-V：2.21.2 反应导航：^ 3.11.0

代码很基本：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Avatar, Button, Icon } from 'react-native-elements'
import * as t from 'tcomb-form-native'
import Router from '../config/router';

const Form = t.form.Form;
const PWD = '2';
const UME = 'J';

class Login extends Component {

constructor(props) {
    super(props);

    this.state = {
        login: {}
    };

    this.LoginModel = t.struct({
        un: t.String,
        pwd: t.String,
        rm: t.Boolean
    });

    this.LoginOptions = {
        fields: {
            un: {
                label: 'User Name',
                error: 'Please type your username'
            },
            pwd: {
                label: 'Password',
                password: true,
                secureTextEntry: true,
                error: 'Please type the password'
            },
            rm: {
                label: 'Remember me'
            }
        }
    }

}

onChange(form) {
    this.state.login = form;
}

onSubmit() {

    console.log(this.props); // will output an empty object! but how?

    const { navigate } = this.props.navigation; // Here is where the error message captured and throw out!

    const value = this.refs.form.getValue(); 

    if (value.un === UME && value.pwd === PWD) {
        alert('Welcome back, Jack');
        // setTimeout(() => {
        //     navigate('Home');
        // }, 300);
    }
}

render() {
    return (
        <View style={styles.container}>

            <View style={{ alignItems: "center", marginBottom: 30 }}>
                <Avatar
                    size="xlarge"
                    icon={{ name: 'apple', color: 'black', type: 'font-awesome' }}
                    overlayContainerStyle={{ backgroundColor: 'white' }}
                    onPress={() => console.log("Works!")}
                    activeOpacity={0.7}
                    containerStyle={{ marginTop: 15 }}
                />
            </View>

            <Form
                ref="form"
                type={this.LoginModel}
                value={this.state.login}
                options={this.LoginOptions}
                onChange={(f) => this.onChange(f)}
            />

            <Button
                icon={
                    <Icon
                        type='font-awesome'
                        name="user"
                        size={25}
                        color="white"
                        iconStyle={styles.icon}
                    />
                }
                title="Login"
                style={styles.btn}
                onPress={()=>this.onSubmit()}
            />

        </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    padding: 80
},
icon: {
    paddingRight: 10
},
btn: {

}
});

export default Login;

更新：这是App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import LoginScreen from './src/screens/Login'

export default function App() {
  return (
    <LoginScreen />
 );
}

Answer 1

根据您的代码，您尚未创建导航堆栈，只需为StackNavigator组件添加一个Login即可

// Other imports
import { createStackNavigator, createAppContainer } from "react-navigation";

...

class Login extends Component {
 ....
}

const styles = StyleSheet.create({...});

const AppNavigator = createStackNavigator({
  Login: {
    screen: Login
  }
});

export default createAppContainer(AppNavigator);

您可以参考react-navigation's document

但是，这只是一种快速的方法，您可能需要在单独的文件中构建导航堆栈。

Answer 2

使用箭头功能可能会起作用：

select  a.PRODUCTNUMBER, d.TextVale  StyleCode , b.TetValue FabricCategory, c.TextValue  LabelCode 
from (
    select  PRODUCTNUMBER, AttributeTypeName  
    from my_table 
)  a 
left join my_table b on a.productnumber  = b.productnumber 
    and b.AttributeTypeName ='Quilted/NonQuilted'
left join my_table c on a.productnumber  = c.productnumber 
    and c.AttributeTypeName ='Length/Weight'
left join my_table d on a.productnumber  = d.productnumber 
    and d.AttributeTypeName ='Core Style'

关键字“ this”是指调用它的函数。但是onSubmit没有道具。 “ ES5引入了bind（）方法来设置此函数的值，无论其如何调用，ES2015引入的箭头函数均不提供其自身的绑定（它保留了封闭词法上下文的this值）。”您可以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

中详细了解

总是喜欢使用箭头功能来避免这种情况。：）

Answer 3

根据代码，我假设您正在App.js内渲染LoginScreen。这样做不会将LoginScreen放在任何导航器中，而是使this.props.navigation等于undefined。

如何修复“无法读取未定义的属性'navigate'”

3 个答案: