如何让 TextInput 在 Android 中显示输入文本的开头而不是结尾？

Question

我的 react-native 应用程序中有一个TextInput 。 当我设置值 prop 并且值比TextInput的长度长时，它显示从末尾而不是开头的文本。 在 iOS 中它工作正常，这似乎是一个 Android 问题。 有没有办法将文本从TextInput的开头或首选显示对齐？

这是我看到的：

这就是我想要的：

这是我的代码

<TextInput
defaultValue={address}
ref="searchInput"
autoCorrect={false}
style={searchStyles.searchInputField}
placeholderTextColor={'#ddd'}
placeholder="Location"
onChangeText={query => this.search(query)}
/>

Answer 1

我遇到了同样的问题，我的解决方案是默认将选择道具添加到开始。 这是有效的，因此当输入聚焦时，它会进入开始。 然后我添加了autoFocus道具并将其设置为 true 以使其在加载组件时进入开始状态。

<TextInput value={address} autoFocus={true} selection={{start:0, end:0}} />

可能有更好的方法来做到这一点，但这是我提出的希望它可以帮助其他人。

Answer 2

添加selection={{start:0}}不带end属性

Answer 3

试试这个对我有用

constructor(props) {
 super(props);
 
 this.state = {
   selection: Platform.OS === 'android' ? { start: 0 } : null
 }
}

onFocus =()=>{
  if(Platform.OS==='android'){
    this.setState({ selection:null });
  }
}

onBlur =()=>{
  if(Platform.OS==='android'){
    this.setState({ selection:{ start: 0, end: 0 } });
  }
}

<TextInput
  onFocus={()=>this.onFocus()}
  onBlur={()=>this.onBlur()}
  selection={this.state.selection}
/>

Answer 4

this.inputRef &&
        this.inputRef.setNativeProps({ selection: { start: 0, end: 0 } })

将代码放在 onEndEditing 中以及您想要更新文本的任何位置。

或者同时更新文本和选择：

this.inputRef &&
        this.inputRef.setNativeProps({ text: value, selection: { start: 0, end: 0 } })

Answer 5

ellipsizeMode="head"或者你可以试试ellipsizeMode="tail"