Wie stelle ich Komponenten in React Native ohne Verwendung von JSX her?

Question

Die kanonische Weise reagieren Heimisch mit scheinbar mit JSX ist:

render: function() { 
    var movie = MOCKED_MOVIES_DATA[0]; 
    return (
    <View style={styles.container}> 
     <Text>{movie.title}</Text> 
     <Text>{movie.year}</Text> 
     <Image source={{uri: movie.posters.thumbnail}} /> 
    </View> 
); 
} 

Wie würde ich dies nur mit JavaScript tun? Normalerweise würde in normalem React React.createElement('div') als eine Alternative zu JSX arbeiten, aber ich bekomme eine Fehlermeldung "Null ist keine Funktion", wenn ich versuche, meine iOS React Native App auszuführen.

Answer 1

Ich versuchte, den Verpacker zu kontaktieren, der sagt, dass er auf Port 8081 hört und auch sagt, dass es Anfragen für index.ios.bundle erhält, während es läuft.

Also habe ich dies in meinem Browser: http://localhost:8081/index.ios.bundle

Im zurück Bündel fand ich:

var wazoo = React.createClass({displayName: "wazoo", 
    render: function() { 
    return (
     React.createElement(View, {style: styles.container}, 
      React.createElement(ScrollView, null, 
      React.createElement(View, null, 
       React.createElement(Text, {style: styles.welcome}, 
        "Wazoo" 
       ), 

Und so weiter. So sieht es aus wie View, ScrollView etc. sind genau wie Komponenten wie in Web React definiert, und der obige Code ist der JS entspricht der JSX.

Answer 2

Daniel Earwicker Lösung ist richtig, aber wir können Fabriken verwenden, um es besser lesbar:

var View  = React.createFactory(React.View); 
var ScrollView = React.createFactory(React.ScrollView); 
var Text  = React.createFactory(React.Text); 

var wazoo = React.createClass({displayName: "wazoo", 
    render: function() { 

    return View({style: styles.container}, 
     ScrollView(null, 
     View(null, 
      Text({style: styles.welcome}, 
      "Wazoo" 
     ) 
     ) 
    ) 
    ); 


    } 
}); 

Answer 3

Ich weiß es, da die ursprüngliche Frage eine Weile her, aber für den Fall, jemand anderes interessiert ist, könnten Sie überprüfen die Bibliothek, die wir bei Uqbar gemacht:

https://www.npmjs.com/package/njsx

Es ist ganz einfach zu bedienen und bietet eine saubere Schnittstelle als die Reaktion out-of-the-box-Schnittstelle.