React Native：为什么不 <TextInput/> 用flexbox居中？

Question

在React Native中，我有一个<TextInput/>但设置了flexbox样式使其居中，但它仍然没有，而是仅位于左侧，而仅垂直居中。 我用简单的<Text/>进行了测试，它正确居中。

如何将<TextInput/>与flexbox居中？

这是代码：

  render() {

    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1, }}>
        <TextInput
          style={{fontWeight: 'bold', height: 18, color: 'red'}}
          placeholderStyle={{fontWeight: 'bold'}}
          placeholderTextColor='red'
          placeholder='Center Me'
        />
      </View>
    )
  }
}

先感谢您！

编辑-添加了其他样式

  <View style=style={{alignItems: 'center', justifyContent: 'center', flex: 1,}}>
    <TextInput
      onChangeText={this._handleName}
      value={this.props.name}
      placeholderTextColor='white'
      placeholder='Put in name'
      style={{
          backgroundColor: 'black',
          borderWidth: 0,
          borderRadius: 15,
          width: 250,
          height: 70,
          fontFamily: 'Roboto',
          fontSize: 20,
          textAlign: 'center',
      }}
    />
  </View>

Answer 1

将textAlign: 'center'添加到TextInput组件。

style={{fontWeight: 'bold', height: 18, color: 'red', textAlign: 'center'}}

实际元素居中对齐，但是textAlign控制内部文本和占位符的对齐。

将更改添加到代码中的结果