Reagieren Nativ: Flex anders verhalten

Question

import React, { Component } from 'react'; 
import { View, Text, StyleSheet, TouchableHighlight } from 'react-native'; 

class First extends Component { 
render() { 
    return (
     <View style = {styles.container}> 
      <Text> 
       Hello world! 
      </Text> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create ({ 
container: { 
    backgroundColor: 'yellow', 
    flex: 1 
} 
}); 


module.exports = First; 

Dieser Code den Bildschirm mit gelben füllt in Projekten begann mit react-native init aber zeigt nichts in Projekten mit create-react-native-app gestartet. Ist das normal?

Edit: Dies wurde fälschlicherweise von einem gestylten View in der Haupt App.js aufgerufen.

Answer 1

es wird Ihnen helfen

import React, { Component } from 'react'; 
import { View, Text, StyleSheet, TouchableHighlight } from 'react-  
native'; 

class First extends Component { 
render() { 
return (
    <View> 
     <Text style = {styles.container}> 
      Hello world! 
     </Text> 
    </View> 
    ); 
    } 
    } 

const styles = StyleSheet.create ({ 
container: { 
backgroundColor: 'yellow', 
flex: 1 
} 
}); 


module.exports = First; 

Answer 2

ich Ihren Code verwendet, und erstellen app create-react-native-app und zeigen gelbe Hintergrundfarbe mit Text hello world! oben mit links

hier das Ergebnis, das ich the-result-using-create-react-native-app

hatte

vielleicht sollten Sie eine andere Test-App erstellen mit create-react-native-add Befehl und sehen Sie das Ergebnis

Answer 3

Dummer Fehler; Ich habe diese Komponente aus einem gestylten View der Haupt App.js aufgerufen. Danke, dass du dir die Zeit genommen hast, um zu helfen, Leute.