警告：失败的道具类型道具“onPress”在“按钮”中标记为必需，但其值为“未定义”答案

【问题标题】：Warning: Failed prop type the prop "onPress" is marked as required in "Button", but its value is "undefined"警告：失败的道具类型道具“onPress”在“按钮”中标记为必需，但其值为“未定义”
【发布时间】：2018-11-23 12:40:35
【问题描述】：

我定义了道具_navigateToRegister，但是当我按下按钮时没有任何反应。而且我有这个错误警告：警告：失败的道具类型道具“onPress”在“按钮”中被标记为必需，但其值为“未定义” 哪里错了？

app.js

import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
import { createStackNavigator } from 'react-navigation';
import Login from './src/screens/Login';
import Secured from './src/screens/Secured';
import Register from './src/screens/Register';

const LifeStorm = createStackNavigator({
Login: { screen: Login },
Register: { screen: Register },
Secured: { screen: Secured },
});

export default class ReactNativeStormpath extends Component {

state = {
isLoggedIn: false
}

render() {

if (this.state.isLoggedIn)
  return <Secured
      onLogoutPress={() => this.setState({isLoggedIn: false})}
    />;
else
  return <Login
      onLoginPress={() => this.setState({isLoggedIn: true})}
    />;
}

}

AppRegistry.registerComponent("App", () => App);

import React, { Component } from "react";
import { ScrollView, Text, TextInput, View, Button } from "react-native";

export default class Login extends Component {

navigateToRegister = () => {
this.props.navigation.navigate("Register");
};

render() {
return (
  <ScrollView style={{ padding: 20 }}>
    <Text style={{ fontSize: 27 }}>Login</Text>
    <TextInput placeholder="Username" />
    <TextInput placeholder="Password" />
    <View style={{ margin: 7 }} />
    <Button onPress={this.props.onLoginPress} title="Submit" />
    <Button onPress={this.props._navigateToRegister} title = "Register" />
  </ScrollView>
);
}
}

module.exports = Login;

import React, { Component } from 'react';
import {
ScrollView,
Text,
TextInput,
View,
Button
} from 'react-native';

export default class Register extends Component {
render() {
    return (
        <ScrollView style={{padding: 20}}>
            <Text
                style={{fontSize: 27}}>
                Register
            </Text>
            <TextInput placeholder='E-Mail' />
            <TextInput placeholder='Username' />
            <TextInput placeholder='Password' />
            <TextInput placeholder='Confirm Password' />
            <View style={{margin:7}} />
            <Button
                    onPress={() => navigate("Login")}
                    title="Submit"
                />
            </ScrollView>
        )
   }
   }

P.S 我是 React Native 的新手。

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

在我看来，您实际上并没有将 _navigateToRegister 属性发送给组件。

这意味着如果您将this.props._navigateToRegister 记录到控制台，结果应该是undefined。并且因为您向 onPress 发送未定义的值，所以您会收到该道具类型错误。

如果你想引用登录组件的navigateToRegister 方法，你可以这样做：

<Button onPress={this.navigateToRegister} title = "Register" />

【讨论】：