Как создать компоненты в React Native без использования JSX?

Канонический способ использования React Native, по-видимому, с 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>
  );
}

Как мне это сделать, используя только JavaScript? Обычно в нормальном React React.createElement('div') будет работать как альтернатива JSX, но я получаю сообщение об ошибке "null не является функцией" при попытке запустить приложение iOS React Native.

Ответы

Ответ 1

Я попытался связаться с упаковщиком, который говорит, что он слушает порт 8081, а также говорит, что он получает запросы для index.ios.bundle мере его index.ios.bundle.

Поэтому я помещаю это в свой браузер: http://localhost: 8081/index.ios.bundle

В возвращенном комплекте я обнаружил:

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

И так далее. Таким образом, он выглядит так: View, ScrollView и т.д. - это как компоненты, как обычно, в Web React, а приведенный выше код JS эквивалентен JSX.

Ответ 2

Решение Daniel Earwicker верное, но мы можем использовать Заводы, чтобы сделать его более читаемым:

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


  }
});

Ответ 3

Я знаю, что это было какое-то время с оригинального вопроса, но, если кто-то заинтересовался, вы могли проверить библиотеку, которую мы сделали в Uqbar:

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

Он довольно прост в использовании и обеспечивает более чистый интерфейс, чем интерфейс React из коробки.