如何将TextInput在页面上居中放置在react-native中？

Question

When TextInput focused and android keyboard opened need to centered TextInput on screen above keyboard. Ho to make it?

Answer 1

For some reason justifyContent is not working for TextInput so just use margins. Here is example:

var styles = StyleSheet.create({
  textInput: {
    marginLeft: 50,
    marginRight: 50
  }
});

Just make sure to set styles to TextInput:

<TextInput style={styles.textInput} />

Almost forgot - do not set width, use margins to define size, or it won't work.

Answer 2

You'll need to use flexbox.

On the parent container you'll need something like:

var styles = StyleSheet.create({
    contaner: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center
    }
});

Here is a good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

I know this is an old question, but I just had the same issue, and found a solution, so I thought I'd share for anyone else having this problem.

I have a container with styles:

flex:1,
justifyContent: 'center',
alignItems: 'center'

Within that container I have several Text elements, along with a Slider and TextInput . Everything was centered properly except the TextInput . To solve this, I added the following to the styles for my TextInput :

alignSelf: 'center'

And now the TextInput is properly centered on the screen.