React Native 文本输入基础知识

在 React Native 中提供了一个文本输入组件TextInput。此组件主要是监听键盘输入事件，并把对应的输入值显示在组件中，此组件还提供了很多功能配置参数，例如自动更正、自动大写、占位符文本和不同的键盘类型（例如数字键盘）。

我们首先来编写一个简单的实例，使用onChangeText事件监听用户的输入：

export default function InputText() {
    
    
  const [name, setName] = useState<string>("");
  const [age, setAge] = useState<string>("");

  return (
    <View style={
    
    styles.container}>
      <Text style={
    
    styles.mainTitle}>InputText 组件实例</Text>
      <View style={
    
    styles.formItem}>
        <Text style={
    
    styles.labelTitle}>姓名：</Text>
        <TextInput
          style={
    
    styles.formInput}
          placeholder="请输入姓名"
          value={
    
    name}
          onChangeText={
    
    (value) => setName(value)}
        ></TextInput>
      </View>
      <View style={
    
    styles.formItem}>
        <Text style={
    
    styles.labelTitle}>年龄：</Text>
        <TextInput
          style={
    
    styles.formInput}
          keyboardType="numeric"
          placeholder="请输入年龄"
          value={
    
    age}
          onChangeText={
    
    (value) => setAge(value)}
        ></TextInput>
      </View>
      <View style={
    
    styles.infoContainer}>
        <Text>姓名：{
    
    name}</Text>
        <Text>年龄：{
    
    age}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
    
    
  container: {
    
    
    margin: 8,
  },
  mainTitle: {
    
    
    fontSize: 22,
    fontWeight: "bold",
    padding: 10,
    borderBottomWidth: 1,
    borderColor: "#e3e3e3",
  },
  input: {
    
    
    borderWidth: 1,
    borderRadius: 4,
    borderColor: "#e3e3e3",
    marginVertical: 8,
    padding: 8,
  },
  formItem: {
    
    
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center",
    rowGap: 8,
    columnGap: 8,
    marginVertical: 12,
  },
  labelTitle: {
    
    
    fontSize: 16,
  },
  formInput: {
    
    
    borderWidth: 1,
    borderRadius: 6,
    paddingHorizontal: 10,
    paddingVertical: 6,
    flex: 1,
  },
  infoContainer: {
    
    
    flexDirection: "row",
    marginVertical: 8,
    justifyContent: "center",
    alignItems: "center",
    rowGap: 8,
    columnGap: 8,
  },
});

TextInput组件除了可以监听onChangeText事件外，还可以监听.focus()和.blur()事件。并且此组件还可以通过设置multiline属性来允许用户输入多行文本数据，例如我们可以允许用户最多输入 4 行文本，字数最大 100 个字符：

<View style={
    
    styles.formItem}>
  <Text style={
    
    styles.labelTitle}>备注：</Text>
  <TextInput
    style={
    
    styles.formInput}
    multiline
    numberOfLines={
    
    4}
    maxLength={
    
    100}
    placeholder="请输入备注"
    value={
    
    summary}
  ></TextInput>
</View>

默认情况下，TextInput 在其视图底部有一个边框。该边框的内边距由系统提供的背景图像设置，并且无法更改。避免这种情况的解决方案是要么不显式设置高度，在这种情况下系统将负责在正确的位置显示边框，要么通过将 underlineColorAndroid 设置为透明来不显示边框。underlineColorAndroid此属性只是针对于安卓设备而言。

请注意，在 Android 上，在输入中执行文本选择可以将应用程序的活动 windowSoftInputMode 参数更改为 adjustmentResize。当键盘处于活动状态时，这可能会导致具有“绝对”位置的组件出现问题。要避免此行为，请在 AndroidManifest.xml 中指定 windowSoftInputMode 或使用本机代码以编程方式控制此参数。