Texteingabeansicht wird nicht richtig dargestellt

Question

Als Anfänger bei React Native habe ich mich für Layouts entschieden. Ich habe eine Komponente wie diese mit einer Texteingabekomponente und einer Textkomponente.

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

Nach TextView Komponente auf Root-Datei Aufruf index.ios.js die Ausgabe so scheint.

Wie Sie nur Text sehen können, wenn Sie dem Stylesheet, aber nicht der Texteingabe folgen. Jede Hilfe wird geschätzt.

bearbeiten

Dies ist, was TextInputStyle wie

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

Answer 1

Das erste, was aussieht, haben angegeben, Sie nicht, was TextInputStyle.default drin ist, kann sein, dass die CSS-Stil überschreibt. Versuchen Sie, TextInput in einer Ansicht zu umbrechen.

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