Come posso creare componenti in React Native senza usare JSX?

Question

Il modo canonico di usare React nativa è apparentemente con JSX:

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

Come dovrei farlo usando solo Javascript? Normalmente in React normale, React.createElement('div') funzionerebbe come alternativa a JSX, ma ricevo un errore "null non è una funzione" quando si tenta di eseguire la mia app iOS React Native.

Answer 1

Ho provato a contattare il packager, che dice che ascolta sulla porta 8081 e dice anche che sta ricevendo richieste per index.ios.bundle durante l'esecuzione.

così ho messo questo nel mio browser: http://localhost:8081/index.ios.bundle

nel bundle tornato, ho trovato:

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" 
       ), 

E così via. Quindi sembra che View, ScrollView ecc. Siano proprio come i componenti definiti come al solito in Web React e il codice precedente è l'equivalente JS di JSX.

Answer 2

soluzione di Daniel Earwicker è corretto, ma possiamo usare fabbriche per renderlo più leggibile:

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

io so che è stato un po 'che la domanda iniziale, ma, nel caso in cui qualcun altro è interessato, si potrebbe verificare la biblioteca che abbiamo fatto a Uqbar:

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

e 'abbastanza facile da usare e fornisce un'interfaccia più pulita rispetto all'interfaccia React out-of-the-box.