Горизонтальная прокрутка по текстовому вводу

Question

У меня есть два входных текста. Сначала для электронной почты, проблема возникает, когда я пишу больше текста, чем ширина этого ввода, остальная часть текста не отображается. Нормальное поведение будет прокручиваться по горизонтали, чтобы увидеть остальную часть текста, не так ли?

Я не знаю, если я что-то упустил, но это не сработает.

Вот пример кода: rnplay.org

Edit: Это эффект, который я хочу получить, это из пользовательского интерфейса примера проводника с официального Реагировать Native репо:

Спасибо !

Answer 1

Я был в состоянии решить эту проблему.

Я не знаю, почему, но проблема возникает, если я поставил как paddingTop и paddingBottom к входному тексту.

Если удалить один из них, то ввод текста работает отлично, вот пример: Input text working well

Я надеюсь, что это может помочь кому-то тоже.

Спасибо.

Answer 2

Я бросил Hacky вещь вместе here, в основном обертывание TextInput в горизонтальном ScrollView:

https://rnplay.org/apps/q7M2Pg

<View style={{ backgroundColor: 'white', overflow: 'hidden' }}> 
    <ScrollView horizontal={true} style={{ marginBottom:-7 }}>       
    <TextInput 
     style={ [styles.loginFormInput, {width:width}] } /> 
    </ScrollView> 
</View> 

Теоретически сделать это лучше, вы могли бы назвать onChangeText метод, чтобы установить ширину в сделайте его более приятным (хотя, естественно, это был бы естественный путь).

Не видите никакой конфигурации для этого в источнике, однако, надеюсь, кто-то может прийти с лучшим ответом!