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