Nodejs 一度將前端JS 推到了服務器端,而15年FB的React-Native RN再一次將JS 推到了移動端的開發浪潮中。RN的優點這裏再也不重複,它是咱們這些習慣了服務端、web端開發,而又不想去花太多時間掌握Android、IOS移動端原生開發的人員的福音,能夠說是咱們通向全棧工程師的快速捷徑!因而乎最近開始學習React-Native,並將學習中的一些點滴記錄下來。前端
網上關於RN的資料很多了,首先是環境配置,不必定非得Mac 下。我是基於Windows開發的,Windows下環境如何配置你們能夠參考這篇文章 Windows下RN環境搭配。準備好開發環境以後就是具體的開發知識學習了。首先是RN控件的學習,這裏咱們先學習RN的控件佈局。react
RN的佈局採用的是CSS+Flexbox佈局方式。咱們初始化使用 命令初始化一個名叫reactNative的項目,命令以下:react-native init reactNative。等待完成以後,咱們使用WebStorm打開項目,在項目裏面的index.android.js文件中插入以下代碼:android
1 import React, {Component} from 'react'; 2 import { 3 AppRegistry, 4 StyleSheet, 5 Text, 6 View 7 } from 'react-native'; 8 9 var App = React.createClass({ 10 render: function () { 11 return ( 12 <View style={styles.main}> 13 <View style={styles.view1}> 14 <Text style={styles.text}>Test1</Text> 15 <Text style={styles.text}>Test2</Text> 16 <Text style={styles.text}>Test3</Text> 17 </View> 18 <View style={styles.view2}> 19 <Text style={styles.text}>Test4</Text> 20 <Text style={styles.text}>Test5</Text> 21 <Text style={styles.text}>Test6</Text> 22 <Text style={styles.text}>Test7</Text> 23 <Text style={styles.text}>Test8</Text> 24 <Text style={styles.text}>Test9</Text> 25 <Text style={styles.text}>Test10</Text> 26 </View> 27 </View> 28 ); 29 } 30 }) 31 var styles = StyleSheet.create({ 32 main: { 33 flex: 1, borderColor: 'blue', margin: 5, borderWidth: 1 34 }, 35 view1: { 36 borderColor: 'red', borderWidth: 1, flexDirection: 'column', height: 150 37 }, 38 view2: { 39 borderColor: 'red', borderWidth: 1, flexDirection: 'row' 40 }, 41 text: { 42 fontSize: 14, margin: 10 43 } 44 }) 45 AppRegistry.registerComponent('reactNative', ()=>App);
編輯完代碼以後,咱們使用windows command 進入項目的目錄,而後使用命令:react-native start啓動項目,而後啓動模擬器,接着使用命令:react-native run-android。就能夠在模擬器中看到以下效果!web
這裏結合代碼,咱們能夠看出:最外層的View咱們使用的是樣式style.main,採用的flex:1,borderColor:’blue’ 就是咱們圖片中最外層的藍色邊框視圖。flex值大於0是表示控件是能夠伸縮的,因爲沒有其餘視圖和這裏的最外層View視圖競爭空間,所以它填充滿了咱們這個手機屏幕。而後裏面有2個子View視圖。windows
第一個視圖使用樣式style.view1 它的邊框是紅色,採用的flexDirection:’column’縱向伸縮,所以它裏面的三個Text控件都是從上往下依次排列的。react-native
第二個視圖使用樣式style.view2 它的邊框也是紅色,採用的flexDirection:’row’橫向伸縮,所以它裏面的7個Text控件都是從左向右依次排列的。(最後一個Text超出了手機寬度邊界,未顯示完整。)服務器
由此咱們能夠看出:在RN中flexbox的flexDirection有兩個字column和row默認爲column值。當設置爲column時控件按照縱向依次排列布局,當設置爲row時控件按照橫向依次排列布局;佈局
前面咱們說了最外層的View設置flex=1是由於沒有其餘控件和它競爭空間,所以它填充滿了咱們整個手機屏幕。這裏咱們修改一下樣式表styles向其中添加幾個樣式,並將它們應用到View1中的3個Text中,修改代碼以下:學習
1 var App = React.createClass({ 2 render: function () { 3 return ( 4 <View style={styles.main}> 5 <View style={styles.view1}> 6 <Text style={[styles.text,styles.row1]}>Test1</Text> 7 <Text style={[styles.text,styles.row2]}>Test2</Text> 8 <Text style={[styles.text,styles.row3]}>Test3</Text> 9 </View> 10 <View style={styles.view2}> 11 <Text style={styles.text}>Test4</Text> 12 <Text style={styles.text}>Test5</Text> 13 <Text style={styles.text}>Test6</Text> 14 <Text style={styles.text}>Test7</Text> 15 <Text style={styles.text}>Test8</Text> 16 <Text style={styles.text}>Test9</Text> 17 <Text style={styles.text}>Test10</Text> 18 </View> 19 </View> 20 ); 21 } 22 }) 23 var styles = StyleSheet.create({ 24 main: { 25 flex: 1, borderColor: 'blue', margin: 5, borderWidth: 1 26 }, 27 view1: { 28 borderColor: 'red', borderWidth: 1, flexDirection: 'column', height: 150 29 }, 30 view2: { 31 borderColor: 'red', borderWidth: 1, flexDirection: 'row' 32 }, 33 text: { 34 fontSize: 14, margin: 10 35 }, 36 row1: {flex: 3}, 37 row2: {flex: 2}, 38 row3: {flex: 1} 39 })
這裏咱們將View1中的三個Text控件的flext值分別設置爲3,2,1,而後咱們在手機中看的效果以下圖:咱們能夠看出三個Text控件的高度分別爲3:2:1佔滿了咱們的View1的高度,這也證明了咱們前面的結論。flex
而後咱們看一下alignSelf佈局,alignSelf的對齊方式主要有四種:flex-start、 flex-end、 center、 auto、 stretch。咱們添加以下代碼:
1 <View style={styles.view3}> 2 <View style={[styles.left,{width:100,height:40, borderWidth:1,borderColor:'silver'}]}><Text>left</Text></View> 3 <View style={[styles.center,{width:100,height:40,borderWidth:1,borderColor:'silver'}]}><Text>center</Text></View> 4 <View style={[styles.right,{width:100,height:40,borderWidth:1,borderColor:'silver'}]}><Text>right</Text></View> 5 <View style={[styles.default,{width:100, height:40,borderWidth:1,borderColor:'silver'}]}><Text>default</Text></View> 6 </View> 7 8 styles: 9 view3: {flex: 1, margin: 5, borderColor: 'red', borderWidth: 1}, 10 left: {alignSelf: 'flex-start'}, 11 center: {alignSelf: 'center'}, 12 right: {alignSelf: 'flex-end'}, 13 default: {alignSelf: 'auto'},
能夠看到以下的效果:
而後還有alignItems、justifyContent它們分別是水平居中、垂直居中。它們的用法以下,咱們添加以下代碼:
1 <View style={[styles.view3,{alignItems:'center',justifyContent:'center'}]}> 2 <View style={{width:120,height:30, borderWidth:1,borderColor:'silver'}}> 3 <Text>水平垂直居中</Text> 4 </View> 5 </View>
運行以後能夠看到以下效果:
以上就是RN的CSS和flexbox佈局的簡單學習。