Как заставить TextInput показывать начало введенного текста вместо конца в Android?

У меня есть TextInput в моем родном приложении. Когда я устанавливаю свойство значения, и значение больше, чем длина TextInput, оно показывает текст, начинающийся с конца, а не с начала. В iOS все работает нормально, проблема в Android. Есть ли способ выровнять текст для отображения с начала TextInput или в зависимости от того, что предпочтительнее?

Вот что я вижу:

введите описание изображения здесь

Вот что я хочу:

введите описание изображения здесь

Вот мой код

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

react-native android textinput
person Wellington    schedule 15.02.2018    source источник
comment
для андроида android:ellipsize="end"   -  person Abu Yousuf    schedule 15.02.2018

Ответы (5)


arrow_upward
7
arrow_downward

Я столкнулся с той же проблемой. Мое решение для этого заключалось в добавлении реквизита selection. к началу по умолчанию. Это работает, поэтому, когда ввод сфокусирован, он переходит в начало. Затем я добавил свойство autoFocus и установил для него значение true, чтобы оно работало. к началу при загрузке компонента.

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

Может быть лучший способ сделать это, но это то, что я придумал, надеюсь, это поможет другим.

person Aidan Doherty    schedule 06.02.2019
comment
но таким образом пользователь больше не может перемещать курсор - person wong2; 05.02.2020
comment
@ wong2 я полагаю, что ваш компонент должен повторно отображаться при изменении или чем-то подобном, что может вызвать эту проблему. - person Aidan Doherty; 06.02.2020
comment
Дал ответ, аналогичный вашему только что. Но вы не должны добавлять атрибут «конец», таким образом, он начнется там, но не будет ограничивать пользователя для изменений или перемещения курсора. - person Yossi Saadi; 09.04.2020
comment
@YossiSaadi Хорошо, я давно его не использовал, но я думаю, что немного помню, что у меня были проблемы с исключением «конца», это могло быть изменено с какими-либо обновлениями за последний год или могло быть только для моего конкретного случая использования. - person Aidan Doherty; 10.04.2020
comment
@AidanDoherty Это вызывает небольшие проблемы, теперь вы позволяете пользователю делать выбор, но положительный момент в том, что он может прокручивать. Все еще нет идеального решения :) - person Yossi Saadi; 10.04.2020
comment
Я больше не могу перемещать курсор, это решение предназначено для исправления положения. - person vishal rathod; 18.03.2021
comment
@vishalrathod Прошло некоторое время с тех пор, как я сделал это, но можете ли вы попытаться предотвратить повторную визуализацию компонента, с которым вы пытаетесь это сделать, и посмотреть, остановит ли это сброс позиции курсора? Также может быть лучший способ сделать это сейчас, так как я в последний раз изучал его... надеюсь, удачи. - person Aidan Doherty; 18.03.2021

arrow_upward
4
arrow_downward

Добавьте selection={{start:0}} без атрибута end

person Yossi Saadi    schedule 09.04.2020
comment
Большое спасибо!!! - person Gopal; 04.04.2021

arrow_upward
4
arrow_downward

попробуй это у меня работает

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}
/>
person Surender Kumar    schedule 13.08.2020
comment
это работает, но незначительная проблема, в первый раз курсор не перемещается, мне нужно сделать второе перемещение для позиции курсора. - person vishal rathod; 18.03.2021

arrow_upward
1
arrow_downward 

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

Поместите код в onEndEditing и везде, где вы хотите обновить текст.

Или обновите текст и выделение одновременно:

this.inputRef &&
        this.inputRef.setNativeProps({ text: value, selection: { start: 0, end: 0 } })
person Đạt Trần    schedule 02.12.2019

arrow_upward
-2
arrow_downward

ellipsizeMode="head" или Вы можете попробовать ellipsizeMode="tail"

person Pravin    schedule 26.05.2018
comment
Я не думаю, что это то, что он ищет, это решение изменит усечение текста, а не начальную позицию TextInput. Начало всегда должно отображаться при загрузке ввода, а затем вы можете провести влево, чтобы просмотреть остальную часть значения. - person Aidan Doherty; 06.02.2019
comment
ellipsizeMode поддерживает только компонент Text - person Vasyl Nahuliak; 15.07.2021