使用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不是函数”。
答案 0 :(得分: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
,ScrollView
等就像Web React中通常定义的组件一样,上面的代码是JS等同于JSX。
答案 1 :(得分:14)
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"
)
)
)
);
}
});
答案 2 :(得分:0)
我知道自原始问题以来已经有一段时间了,但是,如果其他人感兴趣,您可以查看我们在Uqbar制作的图书馆:
https://www.npmjs.com/package/njsx
它非常易于使用,并提供比React开箱即用界面更清晰的界面。