React Native：なぜフレックスボックスを中心に<TextInput/>が中心ですか？

Question

リアクト・ネイティブでは、私は<TextInput/>ですが、フレックス・ボックス・スタイルを中心に設定しましたが、依然として左には座っていませんが、ちょうど垂直にセンタリングされています。私は簡単な<Text/>でそれをテストし、それが正しく中心になります。

<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> 
    ) 
    } 
} 

は、事前にありがとうございます！

EDIT - 追加のスタイルでは、あなたのTextInputコンポーネントにtextAlign: 'center'を追加

<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

を追加しました。

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

実際の要素は、中心位置合わせが、textAlignは内部テキストとプレースホルダの位置合わせを制御します。

The result of adding the change to your code