React

AppRegistry AppRegistry AppRegistry是一個JS對象，指代所有React Native APP，App的root組件需要通過AppRegistry.registerComponent註冊。然後原生系統會通過AppRegistry.runApplication載入App的bundle 方法 名稱 意義 registerConfig

ListView 屬性 名稱 類型 意義 預設值 dataSource ListViewDataSource 資料集 無 initialListSize number 設定第一頁初始化的元素個數 無 onChangeVisibleRows

Image Image 展現圖片的控制項 屬性 名稱 類型 意義 預設值 onLayout function 布局改變時調用該屬性設定的函數 無 resizeMode enum 當圖片和控制項大小不匹配時採取什麼規則來調整圖片(‘cover’, ‘contain’, ‘stretch’)

今天在翻譯React native官方網站的文章時，發現了一個好東西，可以線上編輯React native程式，且可以查看運行效果，是不是比較炫酷。 網址 React Native Playground 開啟後預設介面如下: 建立應用 登陸成功後，選擇NEW APP菜單建立自己的APP，然後會出現如下介面： 然後我們點擊右邊的裝置，可以查看效果： 修改 在面板左邊的線上編輯器中進行修改後，按Ctrl+s時會即時的將效果顯示在右邊的裝置中：

今天把react native環境搭建完成，然後運行個小demo試試. 第一篇環境配置 & Hello World 總結 按照上面的學習文章，我基本完成，但是在配置過程中遇到2個問題，需要終結一下。 已安裝node 由於我安裝react-native之前已經安裝過node，我們執行的話會報錯，這個錯誤就是因為react-native使用的是io.js,這個時候我們需要安裝io.js，而你必須刪除node，我按照教程上的解答使用了brew unlink

源碼 /** * Sample React Native App * https://github.com/facebook/react-native */'use strict';var React = require('react-native');var { AppRegistry, StyleSheet, Text, View,} = React;var helloworld = React.createClass({ render: function() {

ActionSheetIOS 方法 static showActionSheetWithOptions(options: Object, callback: Function) :顯示上拉菜單 static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function):顯示分享菜單 執行個體 'use

學習完React Native抽時間來看看它的基礎React，利用ATom來搭建Reactjs開發環境 atom github官方推出的編輯器 atom-beautify外掛程式 atom-beautify用來格式化代碼用的，在atom編輯器中開啟’Settings’面板，可以通過快速鍵Command+,來開啟,開啟後進入Install，在搜尋方塊中輸入atom-beautify，然後點擊安裝就行： atom-html-preview外掛程式

WebView 屬性 名稱 類型 意義 預設值 automaticallyAdjustContentInsets bool bounces bool contentInset {top: number, left: number,

參考文章: debug Memory leak in profile react-native的開發人員選項 在類比視窗上按Ctrl+Command+z或者Command+d會調出react native的開發人員選項: Reload 重新運行程式，類似於在Xcode中按Command+R. Debug in Chrome 在Chrome瀏覽器下調試，在chrome瀏覽器下輸入http://localhost:8081/debugger-ui,再按Alt+

Jest 安裝 使用命令npm install jest-cli --save-dev來安裝Jest命令列: localhost:TesterHome wuxian$ npm install jest-cli --save-devjest-cli@0.7.1 node_modules/jest-cli├── jasmine-pit@2.0.2├── object-assign@4.0.1├── graceful-fs@4.1.2├── through@2.3.8├──

ActionSheetIOS 方法 static showActionSheetWithOptions(options: Object, callback: Function) :顯示上拉菜單 static showShareActionSheetWithOptions(options: Object, failureCallback: Function, successCallback: Function):顯示分享菜單 執行個體 'use

WebView 屬性 名稱 類型 意義 預設值 automaticallyAdjustContentInsets bool bounces bool contentInset {top: number, left: number,

參考文章: debug Memory leak in profile react-native的開發人員選項 在類比視窗上按Ctrl+Command+z或者Command+d會調出react native的開發人員選項: Reload 重新運行程式，類似於在Xcode中按Command+R. Debug in Chrome 在Chrome瀏覽器下調試，在chrome瀏覽器下輸入http://localhost:8081/debugger-ui,再按Alt+

1. npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2 2. npm install --save-dev react-hot-loader@3.0.0-beta.6或者npm install --save-dev react-hot-loader@next 3. .babelrc配置{

安裝完react以後，在終端輸入以下： react-native init myFirstReactProject 安裝完成如下圖： 藍色框框裡面就寫清楚怎麼運行，這個項目。 下面舉個運行ios版的。 在終端輸入下面的命令： cd /Users/zhuling/Desktop/myFirstReactProjectreact-native run-ios 意思是先進入目錄，然後在運行。我們也可以開啟我們建立的目錄下面的xcode檔案，然後運行：

React-Native在開發工程中也有許多實現不了的功能，這就需要藉助原生應用來實現了，React-Native實現和iOS原生互動只需要進行以下幾個步驟即可。 1、匯入RCTBridgeModule標頭檔 #import <React/RCTBridgeModule.h> 2、引入協議 #import <Foundation/Foundation.h>#import <React/RCTBridgeModule.h>@interface

Cannot find entry file index.ios.js [index.android.js] in any of the roots 網上一搜出現這個問題的人還挺多，解決方案就是： 項目路徑下運行：npm start -- -reset-cache 再重新啟動項目：react-native run-ios(run-android) 如果還是失敗那麼就在這裡看看有沒有解決方案 NPM modules get required from

眾所周知用React Native是可以開發跨平台的Android和iOS App。我們可以用React Native開發Android應用也可以開發iOS應用，那麼如何讓我們開發的React Native應用適配Android和iOS雙平台呢。 在這篇文章中我將從布局、組件選擇、圖片、效能問題、Bugs等幾個方面來談一談Android和iOS的適配問題。 布局 React

現在的手機品牌和型號越來越多，導致我們平時寫布局的時候會在個不同的行動裝置上顯示的效果不同， 比如我們的設計稿一個View的大小是300px，如果直接寫300px，可能在當前裝置顯示正常，但到了其他裝置可能就會偏小或者偏大，這就需要我們對螢幕進行適配。 安卓原生的話有自己的適配規則，可以根據不同的尺寸建立不同的檔案夾，系統會根據當前的裝置尺寸取對應的大小的布局。而RN本身並沒有適配規則，而原生的又比較反鎖，這就需要我們自己去對螢幕進行適配。 先看一下剛出爐的螢幕適配工具類：