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

Question

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

如何使 flexbox 居中 <TextInput/>？

代码如下：

  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 控制内部文本和占位符的对齐方式。

The result of adding the change to your code

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

React Native: Why doesn't <TextInput/> center with flexbox?

javascript

css

reactjs

react-jsx

react-native