inputText道具在react-native中不起作用

Question

我创建了两个组件apptextinput和屏幕登录。在apptextinput中，我将其设为可重用组件，这是我的代码

export default function AppTextInput({ icon, ...otherProps }) {
  return (
    <View style={styles.container}>
      {icon && (
        <MaterialCommunityIcons
          name={icon}
          size={30}
          color={colors.red}
          style={styles.icon}
        />
      )}
      <TextInput style={defaultStyles.text} {...otherProps} />
    </View>
  );
}

以及我在可重用组件上方传递的第二个组件，其中包含图标和...其他道具，但输入中仅显示图标其他道具，例如autocapitalize，onchangetext占位符，keyboadrtype和其他道具不起作用，仅图标渲染在这里是我的代码

export default function ScreenLogin() {
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();
  return (
    <ExpoScreen>
      <Image style={styles.logo} source={require("../assets/logo.png")} />
      <AppTextInput
        autoCapitalize="none"
        autoCorrect={false}
        icon="email"
        keyboardType="email-address"
        placeholder="Email"
        textContentType="emailAddress"
        onChangeText={(text) => setEmail(text)}
      />
      <AppTextInput
        onChangeText={(text) => setPassword(text)}
        autoCapitalize="none"
        autoCorrect={false}
        icon="lock"
        keyboardType="email-address"
        placeholder="Password"
        textContentType="password"
        secureTextEntry
      />
      <AppButton title="login" onPress={() => console.log(email, password)} />
    </ExpoScreen>
  );
}

Answer 1

您还需要在TextInput中传递当前值

export default function ScreenLogin() {
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();
  return (
    <ExpoScreen>
      <Image style={styles.logo} source={require("../assets/logo.png")} />
      <AppTextInput
        autoCapitalize="none"
        autoCorrect={false}
        icon="email"
        keyboardType="email-address"
        placeholder="Email"
        textContentType="emailAddress"
        onChangeText={(text) => setEmail(text)}
        value={email}   // HERE IS THE CHANGE
      />
      <AppTextInput
        onChangeText={(text) => setPassword(text)}
        autoCapitalize="none"
        autoCorrect={false}
        icon="lock"
        keyboardType="email-address"
        placeholder="Password"
        textContentType="password"
        secureTextEntry
        value={password}   // HERE IS THE CHANGE
      />
      <AppButton title="login" onPress={() => console.log(email, password)} />
    </ExpoScreen>
  );
}

您也可以尝试更改它

export default function AppTextInput(props) {
  return (
    <View style={styles.container}>
      {props.icon && (
        <MaterialCommunityIcons
          name={props.icon}
          size={30}
          color={colors.red}
          style={styles.icon}
        />
      )}
      <TextInput style={defaultStyles.text} {...props} />
    </View>
  );
}