Question

我是React Native的新手，我正在构建具有登录和注册界面的应用程序，试图使用（this.props.type）来控制签名/注册按钮，但是我的代码中出现错误，希望你们对我有帮助：）

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  TextInput,
  TouchableOpacity,
  Text
} from 'react-native';

const Form: () => React$Node = () => {

    return (
    <View style={styles.container}>
        <TextInput style={styles.inputBox}
                   underlineColorAndroid= 'rgba(0,0,0,0)'
                   placeholder= "Phone Number"
                   autoCorrect={true}
                   textContentType="telephoneNumber"
                   keyboardType="numbers-and-punctuation"
                   placeholderTextColor = "#ffffff"
        />

        <TextInput style={styles.inputBox}
                   underlineColorAndroid= 'rgba(0,0,0,0)'
                   placeholder= "Email"
                   autoCorrect={true}
                   textContentType="emailAddress"
                   keyboardType="email-address"
                   placeholderTextColor = "#ffffff"
        />

        <TextInput style={styles.inputBox}
                   underlineColorAndroid= 'rgba(0,0,0,0)'
                   placeholder= "Email Password"
                   secureTextEntry={true}
                   placeholderTextColor = "#ffffff"
        />

        <TouchableOpacity style={styles.button}>
                  <Text style={styles.buttonText}>{this.props.type} </Text>
        </TouchableOpacity>
    </View>
    );
};

我还使用它们在登录和注册文件中插入行：

<Form types="SignUp"/>
<Form types="SignIn"/>

Answer 1

更改Form以接收参数

const Form: ({ types }) => React$Node = () => {

然后像使用它

<TouchableOpacity style={styles.button}>
  <Text style={styles.buttonText}>{types} </Text>
</TouchableOpacity>

并呈现您的表单

<Form types="SignUp"/>
<Form types="SignIn"/>

没有打字稿的表格组件

const Form = ({ types }) => (
  <View style={styles.container}>
    <TextInput
      style={styles.inputBox}
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder="Phone Number"
      autoCorrect={true}
      textContentType="telephoneNumber"
      keyboardType="numbers-and-punctuation"
      placeholderTextColor="#ffffff"
    />

    <TextInput
      style={styles.inputBox}
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder="Email"
      autoCorrect={true}
      textContentType="emailAddress"
      keyboardType="email-address"
      placeholderTextColor="#ffffff"
    />

    <TextInput
      style={styles.inputBox}
      underlineColorAndroid="rgba(0,0,0,0)"
      placeholder="Email Password"
      secureTextEntry={true}
      placeholderTextColor="#ffffff"
    />

    <TouchableOpacity style={styles.button}>
      <Text style={styles.buttonText}>{types} </Text>
    </TouchableOpacity>
  </View>
);

Answer 2

问题出在您的文本中，您正在获取this.props.type <Text style={styles.buttonText}>{this.props.type} </Text>，但是您正在传递类型<Form types="SignUp"/>

因此将“文本”内部更改为

<Text style={styles.buttonText}>{this.props.types} </Text>

希望有帮助

未定义不是对象（评估“ _this.props.type”）是本机反应

2 个答案: