Question

我正在尝试构建自定义输入组件，并将其呈现在另一页上这是我的代码

import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { MaterialCommunityIcons } from "@expo/vector-icons";
class RegisterTextBox extends React.Component {
  render() {
    const RegisterTextInput = ({
      value,
      placeholder,
      onChangeText,
      onBlur,
      secureTextEntry,
      inputStyle,
      viewStyle,
      eyeIcon = false,
    }) => {
      return (
        <View style={[styles.container, viewStyle]}>
          <TextInput
            style={[styles.main, inputStyle]}
            value={value}
            onChangeText={onChangeText}
            onBlur={onBlur}
            placeholder={placeholder}
            secureTextEntry={secureTextEntry}
          />
          {eyeIcon ? (
            <MaterialCommunityIcons
              name="eye-off"
              size={24}
              color="black"
              style={{ paddingTop: 5 }}
            />
          ) : (
            <View />
          )}
        </View>
      );
    };

    const styles = StyleSheet.create({
      container: {
        height: hp(5.4),
        width: wp(65.2),
        borderBottomColor: "grey",
        borderBottomWidth: 1,
        flexDirection: "row",
        justifyContent: "space-between",
      },
      main: {},
    });
  }
}
export default RegisterTextBox;

我希望渲染const RegisterTextInput并使用动态数据，但是在尝试使用它时似乎出现错误“错误：RegisterTextBox（...）：渲染未返回任何内容。这就是我要使用的方式：

...
import RegisterTextInput from "../components/registerInput";
<View style={styles.emailInputsContainer}>
            <RegisterTextInput
              style={styles.emailInput}
              placeholder="Email"
              value={"email"}
              onChangeText={}
            />
          </View>
...

我的问题在哪里？注意：我想在此组件上使用状态

Answer 1

尝试一下...

import React from "react";
import { View, TextInput, StyleSheet, Text } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import { MaterialCommunityIcons } from "@expo/vector-icons";

class RegisterTextBox extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {
      value,
      placeholder,
      onChangeText,
      onBlur,
      secureTextEntry,
      inputStyle,
      viewStyle,
      eyeIcon = false,
    } = this.props;
    return (
      <View style={[styles.container, viewStyle]}>
        <TextInput
          style={[styles.main, inputStyle]}
          value={value}
          onChangeText={onChangeText}
          onBlur={onBlur}
          placeholder={placeholder}
          secureTextEntry={secureTextEntry}
        />
        {eyeIcon ? (
          <MaterialCommunityIcons
            name="eye-off"
            size={24}
            color="black"
            style={{ paddingTop: 5 }}
          />
        ) : (
          <View />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: hp(5.4),
    width: wp(65.2),
    borderBottomColor: "grey",
    borderBottomWidth: 1,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  main: {},
});

export default RegisterTextBox;

导入/导出组件

1 个答案: