標籤:
Nodejs 一度將前端JS 推到了伺服器端,而15年FB的React-Native RN再一次將JS 推到了移動端的開發浪潮中。RN的優勢這裡不再重複,它是我們這些習慣了服務端、web端開發,而又不想去花太多時間掌握Android、IOS移動端原生開發的人員的福音,可以說是我們通向全棧工程師的快速捷徑!於是乎最近開始學習React-Native,並將學習中的一些點滴記錄下來。
網上關於RN的資料不少了,首先是環境配置,不一定非得Mac 下。我是基於Windows開發的,Windows下環境如何配置大家可以參考這篇文章 Windows下RN環境搭配。準備好開發環境之後就是具體的開發知識學習了。首先是RN控制項的學習,這裡我們先學習RN的控制項布局。
RN的布局採用的是CSS+Flexbox布局方式。我們初始化使用 命令初始化一個名叫reactNative的項目,命令如下:react-native init reactNative。等待完成之後,我們使用WebStorm開啟項目,在項目裡面的index.android.js檔案中插入如下代碼:
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: 134 },35 view1: {36 borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘column‘, height: 15037 },38 view2: {39 borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘row‘40 },41 text: {42 fontSize: 14, margin: 1043 }44 })45 AppRegistry.registerComponent(‘reactNative‘, ()=>App);
編輯完代碼之後,我們使用windows command 進入項目的目錄,然後使用命令:react-native start啟動項目,然後啟動模擬器,接著使用命令:react-native run-android。就可以在模擬器中看到如下效果!
這裡結合代碼,我們可以看出:最外層的View我們使用的是樣式style.main,採用的flex:1,borderColor:’blue’ 就是我們圖片中最外層的藍色邊框視圖。flex值大於0是表示控制項是可以伸縮的,由於沒有其他視圖和這裡的最外層View視圖競爭空間,因此它填充滿了我們這個手機螢幕。然后里面有2個子View視圖。
第一個視圖使用樣式style.view1 它的邊框是紅色,採用的flexDirection:’column’縱向伸縮,因此它裡面的三個Text控制項都是從上往下依次排列的。
第二個視圖使用樣式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: 126 },27 view1: {28 borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘column‘, height: 15029 },30 view2: {31 borderColor: ‘red‘, borderWidth: 1, flexDirection: ‘row‘32 },33 text: {34 fontSize: 14, margin: 1035 },36 row1: {flex: 3},37 row2: {flex: 2},38 row3: {flex: 1}39 })
這裡我們將View1中的三個Text控制項的flext值分別設定為3,2,1,然後我們在手機中看的效果如:我們可以看出三個Text控制項的高度分別為3:2:1佔滿了我們的View1的高度,這也證實了我們前面的結論。
然後我們看一下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布局的簡單學習。
React-Native 之控制項布局