2016-04-28 24 views
0

我正在學習和磨練自己的技能。我一直在玩一些簡單的例子,從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上的外觀。

Screen shot of iphone 1Screen shot of iphone #2

下面是完整的網頁視圖實施例的提取物。此代碼是一個有點複雜:

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示例,但沒有我可以在哪裏找到有關這些東西如何工作的任何細節。任何人都有線索?

非常感謝!

回答

1

這個link不是一個真正的應用程序。這只是一個組件。看看該文件位於Libraries文件夾中,而不是回購中的Examples。創建了UIExplorer以演示所有組件。如果你很好奇,你可以找到UIExplorer'sAppRegistry.registerComponentin this file。但是它更復雜,並且允許使用不同的組件。 export用於製作其他文件中可用的變量/函數/對象。嘗試Examples文件夾中的其他示例,它們更適合學習RN,並僅使用UIExplorer來了解如何使用特定組件。

相關問題