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

Question

在 React Native 中，我有一个<TextInput/>但 flexbox 样式设置为居中的但它仍然没有，而是只是坐在左侧，而只是垂直居中。我用 simple 测试了它<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 控制内部文本和占位符的对齐方式。

将更改添加到代码的结果