React Native如何实现TextInput从右侧而非左侧开始输入

基础实现（推荐） #

通过动态修改textAlign样式即可实现，输入光标会自动跟随对齐方向停靠在对应侧，同时不会打乱输入字符的正常顺序：

import { TextInput } from 'react-native';

// 组件内调用示例
<TextInput
  style={{
    // 按需调整对齐逻辑，若不需要跟随RTL，直接写textAlign: 'right'即可
    textAlign: isRTL() ? 'right' : 'left',
    // 其他自定义样式
    height: 40,
    borderWidth: 1,
    paddingHorizontal: 8
  }}
  value={yourInputValue}
  onChangeText={yourChangeHandler}
  // 其余TextInput属性正常配置即可
/>

兼容性兜底方案 #

部分低版本安卓设备可能出现空输入时光标仍停靠在左侧的问题，可额外增加selection属性做适配：

import { useState } from 'react';
import { TextInput } from 'react-native';

const CustomTextInput = () => {
  const [inputVal, setInputVal] = useState('');
  const rtlMode = isRTL();

  return (
    <TextInput
      value={inputVal}
      onChangeText={setInputVal}
      style={{
        textAlign: rtlMode ? 'right' : 'left',
        height: 40,
        borderWidth: 1
      }}
      // 空值时强制光标定位在最前，对应右对齐场景就是最右侧位置
      selection={rtlMode && !inputVal ? { start: 0 } : undefined}
    />
  )
}

注意事项 #

不要强制设置writingDirection: 'rtl'样式，该配置会修改字符的排版逻辑，导致英文、数字等LTR字符输入时出现顺序颠倒的问题，仅调整textAlign即可满足需求。

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