React Native自定义FormInput的TextInput输入内容空白无显示问题求助

1. FormInput未正确继承TextInput原生属性：当前FormInput的Props接口仅声明了placeholderText、labelValue两个属性，TypeScript会将传入的onChangeText等其他TextInput原生属性判定为非法属性，无法透传到内部TextInput组件。输入时无回调触发状态更新，绑定的value始终为空，因此输入内容不会显示。
2. FormInput容器样式不合理：容器设置了flex:1，两个FormInput放在同一父容器时会各自抢占一半高度，容易挤压输入框内容区域导致内容不可见。
3. 属性拼写与类型定义错误：传入的键盘属性写为keyBoardType（大写K开头），不符合React Native原生属性keyboardType的命名规范；LoginScreen的Props定义和实际传入值类型不匹配，也会引发运行时异常。

1. 修正FormInput组件 #

让Props继承TextInput原生属性，同时调整样式适配布局：

import React from 'react';
import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
import {COLORS, FONTS} from '../../constants';

// 继承TextInput原生属性，支持所有原生输入框配置
interface Props extends TextInputProps {
  placeholderText: string;
  labelValue: string;
}

const FormInput: React.FC<Props> = ({
  placeholderText,
  labelValue,
  ...restProps
}) => {
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder={placeholderText}
        autoCorrect={false}
        value={labelValue}
        {...restProps}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    // 移除flex:1，改为自适应宽度
    width: '100%',
    marginVertical: 12,
  },
  input: {
    paddingVertical: 15,
    paddingHorizontal: 20,
    borderRadius: 50,
    borderWidth: 2,
    borderColor: COLORS.transparent,
    backgroundColor: COLORS.lightGray,
    ...FONTS.body3,
    color: COLORS.darkgray,
  },
});

export default FormInput;

2. 修正LoginScreen组件 #

删除无用的Props定义，修正属性拼写：

import { Alert, SafeAreaView, View, Text, Image, StyleSheet } from 'react-native';
import React from 'react';
// 替换为你实际的组件导入路径
import FormInput from './FormInput';
import FormButton from './FormButton';
import { images } from '../../constants';

interface State {
  email: string;
  password: string;
}

// 无外部传入Props时泛型填空对象即可
export default class LoginScreen extends React.Component<{}, State> {
  constructor(props: {}) {
    super(props);
    this.state = {
      email: '',
      password: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <SafeAreaView>
          <View style={styles.logoContainer}>
            <Image style={styles.logo} source={images.logo} />
          </View>
          <Text style={styles.loginText}>Login</Text>
          <View style={styles.textInputContainer}>
            <FormInput
              placeholderText="Your email..."
              {/* 修正属性拼写为小写k开头 */}
              keyboardType="email-address"
              autoCapitalize="none"
              autoCorrect={false}
              labelValue={this.state.email}
              onChangeText={(userEmail) =>
                this.setState({email: userEmail})
              }
            />
            <FormInput
              placeholderText="Your password..."
              secureTextEntry={true}
              labelValue={this.state.password}
              onChangeText={(userPassword) =>
                this.setState({password: userPassword})
              }
            />
            <FormButton
              buttonTitle="Login"
              onPress={() => Alert.alert('hello')}
            />
          </View>
        </SafeAreaView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 20,
  },
  logoContainer: {
    alignItems: 'center',
    marginVertical: 30,
  },
  logo: {
    width: 100,
    height: 100,
    resizeMode: 'contain',
  },
  loginText: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  textInputContainer: {
    width: '100%',
  }
})

内容的提问来源于stack exchange，提问作者user16861088