更多組件：https://react.parts/native，調用系統的，注意查看：支持IOSor安卓組件和相關使用樣式用這種方式定義，可以單獨提出來成一個文件。1.引入外部樣式：varStyle=require('./Styles');就可引入相對自己目錄下的Styles.js，注：ReactNative沒有所謂的CSS。varstyles=StyleSheet.create({base:{width:38,height:38,},background:{backgroundColor:'#222222',},active:{borderWidth:2,borderColor:'#00ff00'}});使用樣式：<Textstyle={styles.base}/><Viewstyle={styles.background}/>2.以下是組件說明：2.AppRegistry：應用注冊，用于初始化啟動應用AppRegistry.registerComponent(項目名,()=><入口Class名>);例如：AppRegistry.registerComponent('AwesomeProject',()=>SampleComponent);3.View：試圖，里面可以套用子試圖：<Viewstyle={styles.view}><Viewstyle={styles.subview}>你的其它組件<View></View>布局使用的，Android和IOS都支持。4.Text：用于顯示你要顯示的文字：<Textstyle={styles.Text}>你的文字</Text>你可以配合字體樣式去用5.Image：用于顯示圖片信息：<Imagesource={{uri:team.logo}}style={styles.thumbnail}/>Source:圖片源（URL）（請求網絡用uri，請求本地用：（require('image!<圖片>')））注意：圖片只能放在：android\app\src\main\res\drawable-[尺寸]，目錄下，才能被找到，其它任意位置均不能使用本地圖片（文件命名：全字母小寫，才能使用，否則報錯）。6.ListView:列表試圖，用于渲染自定義列表：<ListViewdataSource={this.state.dataSource}renderRow={this.renderScoreboard}style={styles.listView}/>dataSource：數據源（JSON格式）renderRow：自定義渲染行（綁定一個方法，在this下返回JSX，自定義行代碼）7.Loading加載試圖的做法1.this->renderLoadingView，建立一個顯示文字或Image。2.在列表渲染的時候之前，做一個這個判斷，讓它顯示。這里說一下，請求數據，是如何工作的，這里要用到newListView.DataSource和fetch3.如上圖：初始化數據使用getInitialState，對dataSource初始化，rowHasChanged:(row1,row2)=>row1!==row2，和下面這句rowHasChanged:function(row1,row2){row1!==row2}這兩句是相等的，用于行是否改編請求數據使用的是fetch，REQUEST_URL是URL地址,第一個then用于調試或改寫返回結果，第二個then用于渲染界面，第三個catch是請求出錯，所執行的。更多請求詳情，可參考：/github/fetch，(文件上傳和表單提交，添加頭部及提交方式，可參考，最后兩項)8.TextInput:文本輸入框，用于輸入文字的<TextInputplaceholder='Searchvianameorpostcode'secureTextEntry={true}/>Placeholder：提示要顯示的文字secureTextEntry：是否是密碼框以下是三個觸屏試圖：9.TouchableHighlight:觸屏高亮試圖，體驗效果更好。<TouchableHighlightunderlayColor='#99d9f4'><Textstyle={styles.buttonText}>Go</Text></TouchableHighlight>underlayColor:高亮所顯示的顏色10.TouchableNativeFeedback:導航返回試圖<TouchableNativeFeedback onPress={this._pressButton}background={TouchableNativeFeedback.SelectableBackground()}></TouchableNativeFeedback>onPress:綁定一個this->自定義方法，把自己Pop掉。11.ToastAndroid:安卓提示信息ToastAndroid.show('Thisisatoastwithlongduration',ToastAndroid.LONG)}>String：顯示的信息ToastAndroid.LONG：顯示時間：長ToastAndroid.SHORT:顯示時間：短12.SwitchAndroid：Android交換開關<SwitchAndroidonValueChange={(value)=>this.setState({falseSwitchIsOn:value})}style={{marginBottom:10}}value={this.state.falseSwitchIsOn}/>onValueChange：在值改變的時候，重置state.Value:初始化默認值13.ProgressBarAndroid：Android加載動畫<ProgressBarAndroidstyleAttr="Horizontal"/>styleAttr：進度條的樣式，包括以下六種：HorizontalSmallLargeInverseSmallInverseLargeInverse頁面之間參數傳遞，可以采用這種方式。14.DrawerLayoutAndroid：Android右邊浮動繪制層<DrawerLayoutAndroiddrawerWidth={150}drawerPosition={DrawerLayoutAndroid.positions.Left}renderNavigationView={()=>navigationView}>[內容部分]</DrawerLayoutAndroid>drawerWidth：繪制的寬度renderNavigationView：繪制的視圖，及左邊布局的樣子，元素drawerPosition：繪制的方式：DrawerConsts.DrawerPosition.LeftDrawerConsts.DrawerPosition.Right15.navigator：場景切換函數push：導航到一個新的場景，擠壓你當前任何場景replace：用一個新場景替換當前場景pop：回歸上一個，并卸載當前場景。popToTop：彈出堆棧中的第一個場景，卸載其他場景popToRoute：彈出一個特定的場景，這之后所有的場景將被卸載回傳：但是navigator.pop()并沒有提供參數，因為pop()只從[路由1,路由2，路由3。。。]里，把最后一個路由踢出去的操作，并不支持傳遞參數給倒數第二個路由。

所以：這里要用到一個概念，把上一個頁面的實例或者回調方法，作為參數傳遞到當前頁面來，在當前頁面操作上一個頁面的state或調用方法。16.AsyncStorage：異步存儲（鍵-值對存儲，關閉APP后，仍然存儲）添加數據，代碼如下：

AsyncStorage.setItem([key],[value])

.then(()=>{debugger;})

.catch((error)=>{debugger;}).done();刪除數據，代碼如下：

AsyncStorage.removeItem([key])

.then(()=>{debugger;})

.catch((error)=>{debugger;}).done();查詢數據，代碼如下：

AsyncStorage.getItem([key])

.then((value)=>{debugger;})

.catch((error)=>{debugger;}).done();then返回的是正確（value:查詢的值），catch返回錯誤（error.message:錯誤消息）17.WebView：瀏覽器組件（Android：0.17.0以上，才支持，IOS：無限制）<WebViewref={WEBVIEW_REF}automaticallyAdjustContentInsets={false}url={this.state.url}onNavigationStateChange={this.navigationStateChange}startInLoadingState={true}/>RN:<v0.19以前的url：加載的網頁URL地址。html：加載靜態網頁HTML。RN:>=v0.20以上的source：提供以下，三種寫法。1.source={{uri:this.state.url}}URL地址2.source={require('./helloworld.html')}請求靜態HTML文件3.source={{html:HTML}}加載靜態網頁HTML注意：他已經把url和html整合在一起了。source擴展寫法：automaticallyAdjustContentInsets：自動調整內容內邊距onNavigationStateChange：導航狀態發生改變時，如：(加載完成，加載中，加載錯誤)startInLoadingState：初始化加載狀態，（true：一打開頁面，就加載、false：默認不加載）用這個組件，可以做APP瀏覽器，或者是OAuth開源認證，登錄的功能。17.Animated：動畫組件（Animated.Image,Animated.Text,Animated.View）<Animated.Textstyle={{fontSize:26,fontWeight:'bold',color:'white',textAlign:'center',transform:[//`transform`isanorderedarray{scale:this.state.bounceValue},//Map`bounceValue`to`scale`],opacity:this.state.opacity}}>DoubanMovie</Animated.Text>React–->Animated(動畫模塊，在React下)Animated.spring:彈性動作（逐漸放大）Animated.decay:彈性動作（逐漸放大后縮小）Animated.timing:平滑動作duration：執行動畫所花費的時間（ms）Flexbox彈性盒子布局flexDirection:’row’、’column’(子元素排列方式)flexWrap:’wrap’,’nowrap’(單行，多行，容器會自動換行，布局到下一行，自適應布局)alignItem:’flex-start’,’flex-end’,’center’,’stretch’(子元素，上下對齊方式)justifyContent:’flex-start’,’flex-end’,’center’,’space-between’,’space-around’（子元素，左中右對齊方式，類似Word文字排列方式）flex:子元素，所占空間比列alignSelf:’auto’,’flex-start’,’flex-end’,’center’,’stretch’(單個元素對齊方式)npminstall（安裝）、（npmuninstall卸載）如果不用了，建議卸載，否則會增加包大小adb命令：adbdevices（查看adb管理的模擬器）adbreboot（重啟：模擬器）adbremount（重新掛載系統分區）以下是第三方控件（注意：第三方控件，也許會存在很多問題，甚至致命性的錯誤和Bug，導致項目不能構造，有些問題需要自己解決，本文最后，提出了一些常見的錯誤解決方案）：splashscreen（歡迎熒屏）：安裝1:npminstall@remobile/react-native-splashscreen–save注意：Installation(Android)下面的，是修改文件：[項目]\android\settings.gradle追加在后面。添加自己的圖片需要注意（添加后重新部署、添加必須是png，不能將jpg改成png，這種操作，否則會導致部署報錯、注意尺寸）詳細步驟：/remobile/react-native-splashscreen效果如圖：ReactNativeDialogs（系統對話框[RN:v0.18,建議使用系統的，此插件有bug]）：安裝1：npminstall@remobile/react-native-dialogs–save詳細步驟：/remobile/react-native-dialogs步驟中，可能會遇到錯誤（3、4、5、6）ReactNativeImagePicker（調用相冊，選擇圖片）：安裝1：npminstall@remobile/react-native-image-picker–save詳細步驟：/remobile/react-native-image-picker步驟中，可能會遇到錯誤（7、8、9）選擇后，如何顯示選擇的圖片，請使用map，state和array，實現此功能，map，在0.17.0以后，遍歷的元素，需要帶上key，否則會有警告提示。ReactNativeSqlite（使用本地數據庫）：安裝1：npminstall@remobile/react-native-sqlite–save詳細步驟：/remobile/react-native-sqlite按照網上步驟走，這個插件，沒有問題。ReactNativeFileTransfer（文件上傳、下載）：安裝1:npminstall@remobile/react-native-file-transfer–save詳細步驟：/remobile/react-native-file-transferReactNativeCamera（調用：攝像頭，捕獲圖片并編輯）：安裝1：npminstall@remobile/react-native-camera–save詳細步驟：/remobile/react-native-camera使用Android（GPS功能）：配置xml：android\app\src\main\AndroidManifest.xml，添加如下代碼：<uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/>如圖所示：接下來用法：/project/react-native/geolocation.html使用谷歌地圖組件（react-native-gmaps）：先為模擬器安裝1：Genymotion-ARM-Translation_v1.1.zip命令：adbreboot，重啟模擬器。在安裝2：gapps-kk-20140105-signed.zip命令：adbreboot，重啟模擬器，（下面建議）。在VPN下面，注冊谷歌賬號，登錄GooglePlay，成功后搜索一下（GoogleDrive）。注冊請在（VPN+chrome訪問）：chrome://chrome-signin/?source=8&constrained=0&frameUrlId=1&auto_close=1&showAccountManagement=1啟動后，會自動安裝（GooglePlayServices）安裝完成后，獲取屬于自己的api-key:/maps/documentation/android-api/signup?hl=zh-cn更多實例：/maps/documentation/android-api/其它安卓版本，安裝（GooglePlayServices）：/or下面鏈接/?w=files&flid=5648執行安裝：npminstallreact-native-gmaps--save第三方庫：/teamrota/react-native-gmaps常見錯誤（5）二維碼顯示插件（react-native-qrcode）：安裝1：npminstallreact-native-qrcode詳細步驟：/cssivision/react-native-qrcodeDES加密、解密（ReactNativeDes）：安裝1：npminstall@remobile/react-native-des–save詳細步驟:/remobile/react-native-des單選項（react-native-simple-radio-button）：安裝1：npmireact-native-simple-radio-button–save詳細步驟，樣式局部，可能需要調整：/moschan/react-native-simple-radio-button訪問剪貼板（Clipboard）：React–->Clipboard(原生框架自帶)網址信息：/facebook/react-native/blob/90c7ad112f9e53dc6c71c8f47ea2a31b41d06141/Examples/UIExplorer/ClipboardExample.js推薦：第三方按鈕組件（apsl-react-native-button）：安裝1：npmiapsl-react-native-button–save提示：可實現，加載，顏色變化，Metor風格和禁用（disable）更多資料：/APSL/react-native-button發送/派遣指令給系統（react-native-send-intent）：安裝1：npminstallreact-native-send-intent–save能做以下功能：1.信息分享、2.發送短信、3.發送電話（呼叫/不呼叫）、4.添加日歷事件、5.打開日歷事件更多資料：/lucasferreira/react-native-send-intent掃描條碼、二維碼（react-native-barcodescanner）：安裝1：npmi--savereact-native-barcodescanner配置權限：把下面，拷貝到文件AndroidManifest.xml中：<uses-permissionandroid:name="android.permission.CAMERA"/>頁面引入組件，BarcodeScanner必須是跟路徑，最好另添一個頁面。詳細步驟：/ideacreation/react-native-barcodescanner使用第三方圖表ichartjs（react-native-ichart）：安裝1：npmireact-native-ichart–saveAndroid不能使用，需要修正（node_modules/react-native-ichart/index.js）需要使用RN：v0.18.0以上的版本。需要開啟WebView：javaScriptEnabledAndroid={true}、domStorageEnabledAndroid={true}和startInLoadingState={true}需要從外部引入js如下所示：<scripttype="text/javascript"src="…"></script>庫的位置：/ichart.latest.min.js更多資料：/AdonRain/react-native-ichart滑動塊（react-native-slider）：安裝1：npmi--savereact-native-slider更多資料：/jeanregisser/react-native-slider系統的彈出菜單（react-native-simplemenu-android）：安裝1：因未托管npm，可以從github上下載源碼，拷貝到node_modules，照資料里的文檔配置，就可以使用了，資料如下：更多資料：/q-m/react-native-simplemenu-android下拉選項框（react-native-dropdown-android）：安裝1：npminstall--savereact-native-dropdown-android更多資料：/chymtt/ReactNativeDropdownAndroid進度條組件（react-native-progress）：安裝1：npminstallreact-native-progress--save更多資料：/oblador/react-native-progressImage圖片加載進度（react-native-image-progress）：先，安裝1：npminstallreact-native-progress--save在，安裝2：npminstall--savereact-native-image-progress更多資料：/oblador/react-native-image-progressAndroid狀態欄，控件（react-native-android-statusbar）：安裝1：npmi--savereact-native-android-statusbar更多資料：/NishanthShankar/react-native-android-statusbar分享鏈接組件（react-native-share）：安裝1：npmi--savereact-native-share更多資料：/EstebanFuentealba/react-native-share推送通知（本地或網絡）（react-native-push-notification）：安裝1：npmi--savereact-native-push-notification更多資料：/zo0r/react-native-push-notification智能驗證框架（tcomb-form-native）：安裝1：npminstalltcomb-form-native--save官方僅支持IOS（Android請使用RNv0.19，并覆蓋：bootstrap文件夾）更多資料：/gcanti/tcomb-form-native圖標集合組件（react-native-vector-icons）：安裝1：npminstallreact-native-vector-icons–save注意：在RNv0.18orlater版本，請使用它。/oblador/react-native-vector-icons#bundled-icon-sets（更多圖片樣式，竟在這些網頁）更多資料：/oblador/react-native-vector-icons滾動Tabs面板（react-native-scrollable-tab-view）：安裝1：npminstallreact-native-scrollable-tab-view–save/brentvatne/react-native-scrollable-tab-view#props（更多使用方式，請看此API）不帶滑動翻頁，請使用：react-native-tabs更多資料：/brentvatne/react-native-scrollable-tab-viewFlux下的Router組件（react-native-router-flux）：安裝1：npminstallreact-native-router-flux–save如下代碼：import{Router,Route,Schema,Animations,TabBar,Actions}from'react-native-router-flux';注意：它搭配（react-native-tabs）使用，但自身代碼上，存在問題，可用以下覆蓋：/LynxITDigital/GeoEncoding項目中的\node_modules\react-native-router-flux去覆蓋自己項目中的...更多資料：/aksonov/react-native-router-flux打星星，評價組件（react-native-star-rating）：安裝RN0.16以上：npminstallreact-native-button--save安裝(含)RN0.16以下：npminstallreact-native-star-rating--save注意：支持半顆星，不支持滑動打分，RN:0.16以上的，請安裝react-native-button，然后用我項目中的Component\StarRating.js，去用。更多資料：/djchie/react-native-star-ratingAndroid手機震動（react-native-vibration）：安裝1：npmi--savereact-native-vibration更多資料：/ideacreation/react-native-vibration熱更新技術（react-native-code-push）：安裝1：npminstall--savereact-native-code-push注釋：用于修復緊急補丁，重啟app，替換有問題代碼，而無須重新發布apk。更多信息，請看熱更新，最后一章節，專門講述（文檔最下面）。更多資料：http://microsoft.github.io/code-push/docs/react-native.html

/Microsoft/react-native-code-push獲取緩存大小、清除緩存（react-native-http-cache）：安裝1：npminstallreact-native-http-cache--save更多資料：/reactnativecn/react-native-http-cache郵件發送（react-native-mail）：安裝1：npmi--savereact-native-mail注意：它調用了系統的郵件發送機制，可用作反饋問題，等功能作用。更多資料：/chirag04/react-native-mail視頻播放器（react-native-video）：安裝1：npminstallreact-native-video–save注意：它可播放本地或流媒體，需自己設計播放控件，如：（暫停，播放，進度條，時間顯示，全屏等等功能）。更多資料：/brentvatne/react-native-video日期選擇器（react-native-datetime-picker）：安裝1：npminstall@remobile/react-native-datetime-picker--save安裝2：npminstall@remobile/react-native-simple-button--save修改文件，如下圖：node_modules\@remobile\react-native-datetime-picker\libs\ios其它修改（Java和配置文件），必須刪除APP后，重新部署，使用方式，請看網站

/cnjon/react-native-datetime-picker單選框（可做：級聯功能）：安裝：npminstallreact-native-picker-android–save導入一個公用組件之后，如果下圖這樣使用組件：/beefe/react-native-picker圖片輪播(react-native-swiper2)：安裝：npmireact-native-swiper2–save資料可查閱下面文檔/package/react-native-swiper2/vczero/react-native-lesson/blob/master/%E7%AC%AC4%E7%AF%87React-Native%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98%EF%BC%88%E4%BA%8C%EF%BC%89.md/leecade/react-native-swiper打開外部瀏覽器(RNv0.19以下的)使用對象IntentAndroid（React-->IntentAndroid）React下面的IntentAndroid實例代碼。IntentAndroid.canOpenURL(url,(supported)=>{

if(!supported){

console.log('Can\'thandleurl:'+url);

}else{

IntentAndroid.openURL(url);

}

});打開外部瀏覽器(RNv0.20以上的)IntentAndroid已經標記為棄用（deprecated）請使用Linking對象（React-->Linking）Linking對象返回Promise，代碼如下：

或者是這樣

常見錯誤1.如果npminstall，出現這個錯誤：請安裝：MicrosoftVisualStudioExpress2013forWindowsDesktop，再次運行

，可成功。2.如果出現下面，這個錯誤：請安裝Python27后，配置環境變量，方可成功。3.如果安裝遇到這個錯誤，缺少依賴包，注意它提出的版本號請安裝他提示的版本，再安裝你要安裝的，以下是：react-nativerun-android的錯誤4.如果出現這個錯誤，不能找到npm安裝，依賴的項目。請在自己項目下settings.gradle，配置依賴的項目，最好依賴的放到前面5.如果出現這個錯誤，代表：實例化的類和導入的包不同。6.如果出現這個錯誤，代表實例化構造方法，需要把this，傳進去。[錯誤代碼]如下圖所示：7.如果遇到下圖這個錯誤，請修改（settings.gradle-->路徑：…/android/）,去掉后面的即可。8.如果遇到下圖這個錯誤，請導入包（importandroid.content.Intent）：9.如果遇到以下錯誤，請安裝（npmi@remobile/react-native-cordova--save）IOS平臺（外部安裝包，環境搭建）1.在XCode中打開你的項目,右擊Libraries選擇AddFilesto"項目名"（用RCTVideo項目，而非圖片中顯示的截圖）2.添加libRTCVideo.a到BuildPhases->LinkBinaryWithLibraries在BuildPhases->CopyBundleResources中，添加視頻文件.mp4.現在，你就可以在項目中使用:varVideo=require('react-native-video');更多描述或安卓的配置參看文檔：/brentvatne/react-native-videoGooglePlayServices1.GoogleMap項目，APP用了GooglePlayServices，而機器沒有安裝：GooglePlayServices，在react-nativerun-android命令下，會報：type3錯誤。初次使用會提示用戶升級（GooglePlayServices），升級過程，需要用VPN下載，大約40多兆的文件大小。Watchmanversion（v0.17建議改）默認是25000,改大：MAX_WAIT_TIME（如：120000）文件位置：\node_modules\react-native\packager\react-packager\src\FileWatcher\index.js\node_modules\react-native\packager\react-packager\src\DependencyResolver\FileWatcher\index.js(新版本，在這兒（0.18.0），默認值，比較高)官方網站：http://facebook.github.io/react-native/docs/troubleshooting.html/docs/linux-windows-support.html#content這個錯誤屬于，模塊是es6創建的，引入是es5（require('./IChartDemo')）這個錯誤，如圖代碼，可以解決（ES6靜態結構，必須要;號結束）。另外（RN：v0.18.0）和（RN：v0.17.0）下面文件，會有區別android\app\src\main\java\com\myproject\MainActivity.java上圖是：（RN：v0.18.0,添加、導入第三方包）上圖是：（RN：v0.17.0,添加、導入第三方包）ES6和ES5，在（React-Native）項目中的對照表，請參考/t