19

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 の代替として機能しますが、iOS React Native アプリを実行しようとすると、「null は関数ではありません」というエラーが表示されます。

4

3 に答える 3

20

パッケージャーに連絡してみましたが、ポート 8081 でリッスンし、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などは、Web React で通常定義されているコンポーネントと同じように見えますScrollView。上記のコードは、JSX に相当する JS です。

于 2015-03-26T20:53:03.190 に答える
16

Daniel Earwicker の解決策は正しいですが、Factory を使用して読みやすくすることができます。

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


  }
});
于 2015-04-22T15:56:15.067 に答える