我正在學習和磨練自己的技能。我一直在玩一些簡單的例子,從https://facebook.github.io/react-native/docs/tutorial.html的非常基礎的AwesomeProject開始,然後繼續我在https://rnplay.org/發現的其他一些例子。React Native - 您如何註冊用於加載的高級程序(exports.examples)?
那些簡單的項目都發生
- 列表的形式做出響應進口與
var AwesomeProjectClassName = React.createClass({..
- 創建類
- 有時會有多個類,但將是使用其他類作爲一個壓倒一切的類內容。
然後在該程序的底部會有線:
module.exports = AwesomeProjectClassName;
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProjectClassName;
而且事情會運行很好,生活是美好的。
- 有關理解module.exports行的指南,請查看this link。
我正試圖進入更復雜的例子。我不明白最終的設置/啓動是如何工作的。我正在看的示例是Webview教程,https://facebook.github.io/react-native/docs/webview.html代碼是also available at Github.
下面是程序在iphone上的外觀。
下面是完整的網頁視圖實施例的提取物。此代碼是一個有點複雜:
list react imports // obviously this is pseudo code...
var WebViewExample = React.createClass({...
var Button = React.createClass({... // no problem here
var ScaledWebView = React.createClass({...
var styles = StyleSheet.create({... // no problem here
const HTML = `<!DOCTYPE html>\n ... // no problem here
然後我得到:
exports.displayName = (undefined: ? string);
exports.title = '<WebView>';
exports.description = 'Base component to display web content';
exports.examples = [{
title: 'Simple Browser',
render(): ReactElement {
return <WebViewExample/> ;
}
}, {
title: 'Scale Page to Fit',
render(): ReactElement {
return <ScaledWebView/> ;
}
}, {
title: 'Bundled HTML',
render(): ReactElement {
return (< WebView style = {
{
backgroundColor: BGWASH,
height: 100,
}
}
source = {
require('./helloworld.html')
}
scalesPageToFit = {
true
}
/>
);
}
}, {
title: 'Static HTML',
render(): ReactElement {
return (< WebView style = {
{
backgroundColor: BGWASH,
height: 100,
}
}
source = {
{
html: HTML
}
}
scalesPageToFit = {
true
}
/>
);
}
}, {
title: 'POST Test',
render(): ReactElement {
return (< WebView style = {
{
backgroundColor: BGWASH,
height: 100,
}
}
source = {
{
uri: 'http://www.posttestserver.com/post.php',
method: 'POST',
body: 'foo=bar&bar=foo'
}
}
scalesPageToFit = {
false
}
/>
);
}
}];
我不明白如何「派」這個節目對我的ios模擬器。沒有一個控制事物的重寫類。目前還不清楚如何註冊這些東西。任何人都可以解釋我錯過了什麼嗎?如何設置
module.exports = AwesomeProjectClassName;
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProjectClassName;
這個例子嗎?你能解釋一下到底發生了什麼:
exports.displayName = (undefined: ? string);
exports.title = '<WebView>';
exports.description = 'Base component to display web content';
exports.examples ...
我只是沒有把握這裏的概念。從步進我的代碼中可以看出,exports
是一個簡單的對象,而exports.examples
是一組對象。包含在數組中的那些對象具有渲染功能和標題等等,不清楚的是我如何調用該內容,以便獲得如上圖中所示的示例輸出。這種類型的構造貫穿React Native示例,但沒有我可以在哪裏找到有關這些東西如何工作的任何細節。任何人都有線索?
非常感謝!