react native andorid 學習路程

xdld 9年前發布 | 25K 次閱讀 Android開發 移動開發 react native andorid

關于iOS部分可以參考vczero的lession文章

React-Native 是Android端實現實現動態部署的另一種思路,繞過dexLoad【一些現有的Android插件框架】。

是在開發效率和用戶體驗間做的一種權衡。

React-native使用JS開發,開發效率高、發布能力強。

  • 1、用編輯器打開對應的.js文件,分析代碼結構:

    var React = require('react-native');

和Node.js有關,require可以引入其他模塊。

類似java 的 import com.andorid.xx.Act;

  • 2、定義組件,結構化的代碼:

    var {
    
       AppRegistry,
    
       StyleSheet,
    
       Text,
    
       View,
    
    } = React;
  • 3、React.createClass里的render方法就是渲染視圖用的。return返回的是視圖的模板代碼。

  • 4、樣式表現:那么StyleSheet.create就是干這件事的,只是用JS的自面量表達了css樣式。

  • 5、引入css樣式:

    方法1:style={styles.container}
    
    方法2:style={{width:20,height:100}}
  • 6、注冊View組件,第二個參數為React.createClass創建的 那個var對象

    AppRegistry.registerComponent('aswsome', () => yourVar);

1.環境安裝

1.安裝nvm

  • 1.brew install nvm

2.nvm 安裝最新的 Node.js 4.0

  • nvm install node && nvm alias default node

3.安裝watchman 和 flow

  • $ brew install watchman
  • $ brew install flow

并更新brew

  • brew update && brew upgrade

2.demo運行

首先切換到你想要的目錄下,依次執行以下命令

  • $ npm install -g react-native-cli

  • $ react-native init AwesomeProject

  • $ cd AwesomeProject/

運行項目

  • $ react-native run-android

3.react-android依賴樹

android-jsc-r174650

appcompat-v7-23.0.0

bolts-android-1.1.4

drawee-0.6.1

fbcore-0.6.1

fresco-0.6.1

imagepipeline-0.6.1

imagepipeline-okhttp-0.6.1

jackson-core-2.2.3

jsr305-3.0.0

library-2.4.0

okhttp-2.4.0

okhttp-ws-2.4.0

okio-1.5.0

react-native-0.11.0

support-annotations-23.0.0

support-v4-23.0.0

4.從服務端動態拉取配置,并用listview進行展示

 react native andorid 學習路程

項目主頁:http://www.baiduhome.net/lib/view/home/1442988860857

 本文由用戶 xdld 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!