React Native设置autocomplete输入框占位符从右向左显示

react-native-autocomplete-input 底层封装了React Native原生TextInput组件，你可以通过组件开放的textInputProps属性透传TextInput的配置，直接实现占位符、输入内容从右向左显示，不需要修改组件源码。

具体修改方式 #

在你现有代码的<Autocomplete>组件上新增textInputProps配置即可，核心是给输入框设置右对齐样式：

<Autocomplete
  data={
    autoCompleteWaterSourceData?.length === 1 &&
    autoCompleteWaterSourceData[0]
      ? []
      : autoCompleteWaterSourceData
  }
  placeholder={placeholder1}
  value={querySourceCode}
  autoCorrect={false}
  onChangeText={setQuerySourceCode}
  // 新增以下配置实现从右向左显示
  textInputProps={{
    style: {
      textAlign: 'right', // 控制占位符、输入文本右对齐
      writingDirection: 'rtl' // 适配阿拉伯语、希伯来语等从右向左书写的语言，纯中文/英文场景可省略
    }
  }}
  flatListProps={{
    keyboardShouldPersistTaps: 'always',
    // 注意：你原有代码的keyExtractor存在逻辑错误，idx是数组索引（数字类型），不存在Water_Source_Code属性，建议修正为以下写法
    keyExtractor: (item) => item.Water_Source_Code,
    renderItem: ({
      item: { Water_Source_Code, Water_Source_Name },
    }) => (
      <TouchableOpacity
        onPress={() =>
          setQuerySourceCode(
            Water_Source_Code + ' ' + Water_Source_Name
          )
        }
      >
        <Text style={styles.autoCompleteText}>
          {Water_Source_Code + ' ' + Water_Source_Name}
        </Text>
      </TouchableOpacity>
    ),
  }}
/>

补充说明 #

• 如果你的项目全局开启了RN的RTL布局（通过I18nManager.forceRTL(true)配置），组件会自动适配从右向左的显示规则，不需要单独添加上述样式。
• 如果仅需要占位符右对齐、输入内容保持左对齐，可以监听输入框值变化，当value为空时给输入框设置textAlign: 'right'，有输入内容时切换为textAlign: 'left'即可。

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