Horizontal scroll on text input

问题

I got two input text. First one is for an email, the problem comes when I write more text than the width of this input, the rest of the text doesn't see. The normal behavior would be scroll horizontally to see the rest of the text, right?

I don't know if I'm missing something, but it doesn't work.

Here is the example code: rnplay.org

Edit: This is the effect I wanna get, this is from UI Explorer Example from official React Native repo:

Thank you!

回答1:

I was be able to solve it.

I don't know why, but the problem comes if I have set both paddingTop and paddingBottom to the input text.

If I remove one of them, then the input text works perfectly, here is an example: Input text working well

I hope this can help someone too.

Thanks.

回答2:

I threw a hacky thing together here, basically wrapping the TextInput in a horizontal 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>

Theoretically to make this better, you could call an onChangeText method to set the width to make it nicer (though a native way would be ideal of course).

Don't see any configuration for that in the source at all however, hopefully someone can come along with a better answer!

来源：https://stackoverflow.com/questions/35003358/horizontal-scroll-on-text-input

标签

overflow

react-native

textinput