一、RN概述
中文網:http://reactnative.cn/
ReactNative:使用JS語法編寫移動APP應用,RN會把JS轉換為底層Java或OC,
最終運行於手機-------完全不依賴於瀏覽器或者WebView組件!
搭建RN應用開發環境:
①下載並安裝全局腳手架工具
npm i -g react-native-cli
②運行腳手架工具,創建出空白項目
react-native init 項目名
③在PC上下載並安裝原生Android或IOS開發環境,
編譯當前項目得到APP安裝程序包---詳情參見手冊
創建客戶端安裝程序
安卓開發需要: Windows + Android Atudio + Aandroid SDK
IOS開發需要:Mac OS + XCode
具體過程參考:https://reactnative.cn/docs/getting-started.html
最后在項目根目錄下得到:android\app\build\outputs\apk\debug\app-
debug.apk文件-------AndroidApp的安裝程序,需要把此APK文件安裝到真實手機或者
模擬手機中
④進入空白項目,運行其中的開發服務器-----------PC機目前是服務器
cd 項目目錄
npm start
⑤使用真實手機/模擬器訪問測試-----------Android系統是客戶端
Windows服務器的IP地址:端口號(8081)
查看Windows服務器的IP地址:
cmd >ipconfig
復習:
WebView方案:Vue.js + MintUI
混編方案:Angular + lonic
JSBridge方案:React + ReactNative
1.ReactNative概述
RN本質是一種JSBridge方案,代碼使用JS/React來編寫,RN會將這些代碼轉換為Android/Java
或者iOS/OC,最后運行在手機端.
優勢:一套代碼到處運行;運行效率高;功能豐富;
不足:原生Android和IOS默認組件效果不一致,非要相同只能深度定制.
提示:語法是React語法,采用組件化編程;可以使用的組件要么是用戶自定義的組件,要么是RN預定義
的組件,如<View/>、<Text/>、<Image/>等，不能使用任何HTML標簽組件-----底層沒有瀏覽器！
官網:www.reactnative.com
中文網:reactnative.cn
搭建RN開發運行環境:
前提:
Windows系統(服務器) + Android手機或模擬器
MacOS系統(服務器) + IOS手機或模擬器(客戶端)
①下載並安裝全局腳手架工具
②運行腳手架工具創建空白項目
③在PC上下載並安裝Android或IOS開發環境,編譯當前項目得到APP安
裝程序包.------詳情參見手冊
此目錄會生成:項目目錄\android\app\build\outputs\apk\debug\app-debug.apk
④進入空白項目並運行其中的開發服務器
cd 項目名
npm start
⑤在手機上安裝APP安裝包,遠程訪問PC服務器
注意:開發服務器命令行界面千萬不要用鼠標選中任何內容!如果選中了
客戶端手機APP無法得到更新后的內容!!
⑤在手機上安裝APP安裝包,遠程訪問PC服務器.
二、RN開發常見錯誤
①點擊APP圖標,立即"此應用程序關閉"
APP安裝失敗,只能卸載並重新安裝;
不行就重啟一下模擬器再試試;
再不行換一個其他版本的模擬器
②點擊APP圖標,一片空白
APP啟動失敗了,或者無法從服務器獲取更新后內容;
關閉APP程序,重新啟動;
同時必須保證服務器端控制台沒有用鼠標選中任何內容
③點APP圖標,顯示黑色底紅色錯誤信息
APP設置有問題,或者服務器端代碼有問題;
仔細查看紅色錯誤信息,從中找到解決方案
常見APP紅色錯誤:
Unable to load Script....
原因:APP無法從服務器加載更新后的內容
解決辦法:給APP重新設置服務器的主機名和端口號
搖一搖 > Dev Settings > Debug Server host & port for device >輸入完成后記得
重啟APP即可
Could not cnnect to development server:
原因:APP不能連接到開發服務器;可能原因:①開發服務器沒有啟動
②沒有正確查找到服務器的IP地址(正確的地址應該形如 172.x.x.x或者192.168.x.x)
③APP沒有正確的設置服務器IP和端口
三、ReactNative中的組件樣式編寫
提示:RN應用中沒有瀏覽器,沒有CSS解釋器!RN樣式有些名稱類似CSS樣式名稱,
但是本質完全不一樣!!而且細節也不一樣,例如borderColor、但是不存在border.
①RN中的尺寸都是數字類型,不能賦值為字符串!也沒有單位!如 fontSize:14
②RN中父元素的樣式,不會繼承給子元素--------每個元素的樣式都由自己的style
完全控制,不需要疊加計算父元素的樣式.
方法一:行內樣式
<Any style={{ color:'red',padding:20 }}>
方法二:外部樣式
let ss = StyleSheet.create({
success:{ color: ' red ' }
})
<Any style={ ss.success }>
也可以給一個組件指定多個樣式對象------多個對象組成的數組:
<Any style={ [ss.success,ss.textRight,{ fontSize:30 }] }>
CSS:Cascading StyleSheet,層疊/級聯樣式表,子元素可以繼承父元素的樣式
RN SS: StyleSheet,樣式表,子元素不會繼承父元素的樣式
四、ReactNative中的組件布局
提示:RN中的組件沒有"塊級"和 "行內元素"之分;
所有元素的尺寸由width和height兩個屬性控制;
若沒有指定寬和高,默認有布局系統來控制尺寸-----一套很類似於CSS重點
FlexBox布局系統.常用屬性:
①flex:指定當前元素在主軸上的尺寸占比
number
②flexDirection:子元素排列方向
column:默認值,縱向排列
column-reverse:縱向排列(反向)
row:橫向排列
row-reverse:橫向排列(反向)
③alignItems:子元素在交叉軸方向上的對齊方式
flex-start:子元素對齊到容器的開始位置
flex-end:子元素對齊到容器的結束位置
center:子元素對齊到容器的中部
stretch:默認值,子元素在交叉軸方向上拉伸撐滿容器
④justifyContent:調整所有的子元素(即內容)在主軸上的分布方式
flex-start:子元素碼放在容器的主軸開始位置
flex-end:子元素碼放在容器的主軸結束位置
center:子元素碼放在容器的主軸中央
space-between:第一個孩子在開始,最后一個孩子在結尾,其他孩子之間平均分配空白空間
space-around:每個孩子上下都包裹着相同的空白空間-----相鄰的兩個子元素間的空白是開頭和結尾空白的2倍
space-evenly:所有的空白在孩子之間以及上下頂部平均分配
五、ReactNative提供的常用組件
①View：最簡單的容器，默認沒有高度，要靠內容撐起來，內容溢出后將不顯示
<View style={ }>子組件</View>
注意：View中不能直接放置文本，文本只能放置在Text中
②ScrollView：可以滾動的容器，默認沒有高度，要靠內容撐起來，內容溢出后將出現滾動條
<ScrollView style={ }>子組件</ScrollView>
③Text：顯示單行或多行文本
<Text style={} onPress={} onLongPress={} numberOfLines={顯示出來的行數} ellipsizeMode='省略號顯示的位置'>文本{'\n'}內容</Text>
注意：RN允許Text中嵌套Text，而且子Text可以繼承父Text的樣式！
④Button:按鈕
<Button title="按鈕上的文字" color="按鈕背景色" onPress={ } disabled={true/false}/>
⑤TextInput:文本輸入框(單行/多行)
<TextInput placeholder="提示文字" secureTextEntry={ true } multiline={ true } numberOfLines={3 }
value={ this.state.uname } onChangeText={ this.doChange}/>
⑥Image:圖片