テキスト入力ビューが正しくレンダリングされない

Question

React Nativeの初心者として、レイアウトを見てみることにしました。私はテキスト入力コンポーネントとテキストコンポーネントでこのようなコンポーネントを持っています。

class TextView extends Component{ 
render(){ 
return(
    <View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}> 
    <TextInput style = {TextInputStyle.default}/> 
    <Text> Hello again! </Text> 
    </View> 
) 
} 
} 

TextViewコンポーネントをルートファイルindex.ios.jsにコールした後、出力は次のようになります。

テキストのみが表示され、スタイルシートの後にはテキスト入力は表示されません。どんな助けもありがとう。

編集

これはTextInputStyleは

const TextInputStyle = StyleSheet.create({ 
default : { 
    color : 'darkgrey', 
    fontSize : 14, 
    backgroundColor : 'red', 
    height : 20, 
    width : 100, 
    } 
}) 

Answer 1

最初のもののように見えるもので、あなたが内部TextInputStyle.default何指定していない、それはCSSスタイルをオーバーライドしているかもしれません。ビュー内でTextInputをラップしようとします。

<View style = {{flex:1,justifyContent:'center',alignItems:'center',backgroundColor: 'pink'}}> 
     <View> 
      <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1, width:150}}/> 
     </View> 
     <Text> Hello again! </Text> 
    </View>