Windows下React Native的Android環(huán)境部署及布局示例
搭建基礎(chǔ)環(huán)境
- JDK（必須，不解釋）
- SDK（建議使用Android Studio，集成SDK以及模擬器）
- genymotion（如果是使用真機(jī)或者Android Studio自帶的模擬器，可以選擇不裝）
- NVM（node版本控制器，需要node4.0以上版本）
以上配置不是必須，可自行選擇適合自己的環(huán)境
配置踩坑記錄
genymotion
這里選擇genymotion模擬器來(lái)講解，也會(huì)提一下Android Studio自帶的模擬器的一些注意點(diǎn)，使用真機(jī)的朋友可跳過(guò)這段。
genymotion的安裝有2種模式，一種是帶有Oracle VM VirtualBox虛擬機(jī)，另外一種是純凈版，genymotion的運(yùn)行依賴VirtualBox虛擬機(jī)。
選擇下載android6.0-API 23模擬器
（如果無(wú)法顯示API列表，請(qǐng)配置代理Settings->NetWork->Use HTTP Proxy）
啟動(dòng)模擬器，可能會(huì)有部分人卡在android啟動(dòng)界面上面，無(wú)法進(jìn)入
genymotion的運(yùn)行基于X86的架構(gòu)，比起arm，X86的性能更流暢。我們需要使用X86架構(gòu)的話，還需要安裝HAXM。
1、打開(kāi)SDK Manager->Extras->Intel x86 Emulator Accelerator，安裝即可，如果沒(méi)有任何東西顯示，還是代理問(wèn)題，Tools->Options->Proxy Settings
2、進(jìn)入C:\Users\用戶\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager
安裝intelhaxm-android.exe，安裝出錯(cuò)，請(qǐng)參考這里
至此我們就能進(jìn)入模擬器界面
Android Studio
如果想使用android studio自帶模擬器，可以打開(kāi)AVD Manager->Create Virtual Device->選擇自己需要的android版本
值得注意的是，模擬器默認(rèn)選擇X86架構(gòu)，如果你不喜歡，你需要自己手動(dòng)改成arm架構(gòu)
NVM
這里選擇用NVM來(lái)控制node版本，如果你已經(jīng)裝過(guò)node4.0以上的版本，就跳過(guò)這里。
安裝方式和使用文檔，github上面講的很清楚，這里說(shuō)下代理的配置，其實(shí)也就是npm的代理，配置全局代理
npm config set proxy=you proxy npm config set https-proxy=you https proxy
React-native初始化
心理默默祈禱以下命令千萬(wàn)不要錯(cuò)誤。。。
npm install -g react-native-cli react-native init AwesomeProject cd AwesomeProject react-native start react-native run-android
果然。。。好吧，這里分享下自己遇到的一些問(wèn)題
- npm install -g react-native-cli：出錯(cuò)的最大可能就是node版本低于4.0或者代理沒(méi)配置成功
- react-native run-android：這個(gè)命令會(huì)下載gradle依賴，執(zhí)行失敗的原因大部分也是因?yàn)榇淼膯?wèn)題
進(jìn)入C:\Users\用戶\AppData\.gradle，打開(kāi)gradle.properties（不存在就新建一個(gè)），修改
systemProp.https.proxyHost=You https proxy systemProp.https.proxyPort=You https proxyPort systemProp.http.proxyHost=You proxy systemProp.http.proxyPort=You proxyPort
總算是把a(bǔ)ndroid應(yīng)用程序跑起來(lái)了，真累人啊
布局
這里以三種經(jīng)典布局來(lái)講解react-native布局概念，主要以flexbox為主，react native中有兩個(gè)基本元素< View >與< Text >，分別類似于web端div和span，用于布局和修飾。需要注意的是，react native不是所有的CSS屬性都支持，這里有react native所支持的CSS屬性。
準(zhǔn)備工作
在JSX中寫樣式還是有點(diǎn)不習(xí)慣，這里使用react-native-css模塊來(lái)編寫樣式，安裝、使用過(guò)程如下：
npm install react-native-css -g react-native-css -i style.css -o style.js --watch
布局講解
左右布局
由于是橫向布局，我們需要flex-direction: row（默認(rèn)縱向布局），左右以1:1方式排版，就都需要flex:1，布局容器也需要加上flex:1，表示為伸縮容器。由于react native沒(méi)有br標(biāo)簽，需要換行只能將換行符插入。
樣式表：
wrap {
flex:1;
flex-direction: row;
background-color: yellow;
}
left{
flex:1;
background-color: #64BA9D;
}
right{
flex:1;
background-color: #008E59;
}
text{
padding:10;
font-size:16;
color:#EEEEEE;
line-height:20;
text-align: center;
}頁(yè)面結(jié)構(gòu)：
<View style={styles.wrap}>
<View style={styles.left}>
<Text style={styles.text}>
這是左側(cè)欄{'\n'}
這是左側(cè)欄{'\n'}
這是左側(cè)欄{'\n'}
這是左側(cè)欄{'\n'}
</Text>
</View>
<View style={styles.right}>
<Text style={styles.text}>
這是右側(cè)欄{'\n'}
這是右側(cè)欄{'\n'}
這是右側(cè)欄{'\n'}
這是右側(cè)欄{'\n'}
</Text>
</View>
</View>
左中右布局
左右定寬，中間占滿。
樣式表：
wrap {
flex:1;
flex-direction: row;
background-color: yellow;
}
left{
width: 80;
background-color: #64BA9D;
}
centent{
flex:1;
background-color: #a9ea00;
}
right{
width: 80;
background-color: #008E59;
}
text{
padding:10;
font-size:16;
color:#EEEEEE;
line-height:20;
text-align: center;
}
頁(yè)面結(jié)構(gòu)：
<View style={styles.wrap}>
<View style={styles.left}>
<Text style={styles.text}>
這是左側(cè)欄{'\n'}
這是左側(cè)欄{'\n'}
這是左側(cè)欄{'\n'}
這是左側(cè)欄{'\n'}
</Text>
</View>
<View style={styles.centent}>
<Text style={styles.text}>
這是內(nèi)容區(qū){'\n'}
這是內(nèi)容區(qū){'\n'}
這是內(nèi)容區(qū){'\n'}
這是內(nèi)容區(qū){'\n'}
</Text>
</View>
<View style={styles.right}>
<Text style={styles.text}>
這是右側(cè)欄{'\n'}
這是右側(cè)欄{'\n'}
這是右側(cè)欄{'\n'}
這是右側(cè)欄{'\n'}
</Text>
</View>
</View>
上中下布局
類似新聞和門戶APP的布局，上下貼邊，中間為內(nèi)容區(qū)。
樣式表：
wrap {
flex:1;
flex-direction:column;
}
top{
height: 40;
background-color: #008E59;
}
centent{
flex:1;
background-color: #64BA9D;
}
bottom{
height: 40;
background-color: #a9ea00;
}
text{
padding:10;
font-size:16;
color:#fff;
line-height:20;
text-align: center;
}
頁(yè)面結(jié)構(gòu)：
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.text}>
頭部信息
</Text>
</View>
<View style={styles.centent}>
<Text style={styles.text}>
這是內(nèi)容區(qū){'\n'}
</Text>
</View>
<View style={styles.bottom}>
<Text style={styles.text}>
尾部信息
</Text>
</View>
</View>
綜合布局
簡(jiǎn)單模擬網(wǎng)易新聞APP布局：
我們可以簡(jiǎn)單看看APP布局方式，總體來(lái)說(shuō)就是上中下的布局方式，我們可以初步先編寫外部結(jié)構(gòu)
頁(yè)面結(jié)構(gòu)：
<View style={styles.wrap}>
<View style={styles.top}>
<Text>頭部</Text>
</View>
<View style={styles.cententWrap}>
<Text>新聞主題</Text>
</View>
<View style={styles.bottom}>
<Text>
尾部導(dǎo)航
</Text>
</View>
</View>
樣式表：
wrap {
flex:1;
flex-direction:column;
}
top{
height: 40;
background-color: #EC403C;
}
cententWrap{
flex:1;
flex-direction:column;
}
bottom{
height: 40;
}
大致結(jié)構(gòu)算是搭建完畢，開(kāi)始完善頭部展示（偷懶、不想切圖，就用個(gè)title代替就好啦~~~）
頁(yè)面結(jié)構(gòu)：
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.topTitle}>網(wǎng)易</Text>
</View>
<View style={styles.cententWrap}>
<Text>新聞主題</Text>
</View>
<View style={styles.bottom}>
<Text>
尾部導(dǎo)航
</Text>
</View>
</View>
樣式表：
topTitle{
margin-top: 15;
margin-left: 20;
text-align: left;
font-size: 14;
color:#FFF;
}
頭部?jī)?nèi)容完成之后，就完善內(nèi)容區(qū)域的導(dǎo)航條，但是react-native并沒(méi)有提供ul、li標(biāo)簽（也許以后有），這個(gè)是要View來(lái)代替ul，Text代替li，代碼和數(shù)據(jù)如下：
頁(yè)面結(jié)構(gòu)：
var cententNav = ['頭條', '熱點(diǎn)', '娛樂(lè)', '體育', '財(cái)經(jīng)'];
return (
<View style={styles.wrap}>
<View style={styles.top}>
<Text style={styles.topTitle}>網(wǎng)易</Text>
</View>
<View style={styles.cententWrap}>
<View style={styles.cententNav}>
{
cententNav.map(function(el, index){
return <Text style={styles.cententNavText}>
<Text style={index == 0 ? styles.textR : ""}>{cententNav[index]}</Text>
</Text>
})
}
</View>
</View>
<View style={styles.bottom}>
<Text>
尾部導(dǎo)航
</Text>
</View>
</View>
);
樣式表：
cententWrap{
flex:1;
flex-direction:column;
}
cententNav{
flex-direction: row;
height: 20;
margin-left: 5;
margin-top: 5;
margin-right: 5;
}
cententNavText{
width: 60;
font-size: 14;
color: #9C9C9C;
margin-left: 10;
}
新聞主題方面可以劃分為左右兩欄，左欄固定寬，右欄占滿，由于react-native不支持overflow:scroll屬性，這里會(huì)用到一個(gè)ScrollView的滾動(dòng)條組件來(lái)展示新聞概述，篇幅可能較長(zhǎng)，底部就不再編寫了（就是懶~~），大家各自完善吧，以下是全部的布局代碼和樣式。
頁(yè)面結(jié)構(gòu)：
樣式表：
wrap {
flex:1;
flex-direction:column;
}
top{
height: 40;
background-color: #EC403C;
}
topTitle{
margin-top: 15;
margin-left: 20;
text-align: left;
font-size: 14;
color:#FFF;
}
cententWrap{
flex:1;
flex-direction:column;
}
cententNav{
flex-direction: row;
height: 20;
margin-left: 5;
margin-top: 5;
margin-right: 5;
}
cententNavText{
width: 60;
font-size: 14;
color: #9C9C9C;
margin-left: 10;
}
centent{
flex:1;
flex-direction:column;
borderBottomWidth:1;
}
cententLi{
flex-direction: row;
margin-left: 10;
margin-right: 10;
}
cententImg{
width: 80;
height: 80;
}
cententTitle{
font-size: 16;
color: #232323;
margin-bottom: 3;
}
cententCentent{
font-size: 12;
}
rightCentent{
flex: 1;
padding-left: 5;
padding-top: 5;
padding-right: 5;
padding-bottom: 5;
}
cententType{
width: 40;
height: 22;
position: absolute;
bottom: 0;
right: 0;
}
bottom{
height: 40;
}
text{
padding:10;
font-size:16;
color:#000;
line-height:20;
text-align: center;
}
textR{
font-weight: bold;
color:#EC403C;
}
line{
height: 1;
background-color: #E4E4E4;
margin-left: 10;
margin-right: 10;
margin-top: 7;
margin-bottom: 7;
}
相關(guān)文章
本文主要介紹Android 五大布局的知識(shí)資料，這里整理了詳細(xì)的布局資料及實(shí)現(xiàn)示例代碼，和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-09-09
Android 自定義通用的loadingview實(shí)現(xiàn)代碼
本篇文章主要介紹了Android 自定義通用的loadingview實(shí)現(xiàn)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-01-01
Android編程連接MongoDB及增刪改查等基本操作示例
這篇文章主要介紹了Android編程連接MongoDB及增刪改查等基本操作,簡(jiǎn)單介紹了MongoDB功能、概念、使用方法及Android操作MongoDB數(shù)據(jù)庫(kù)的基本技巧,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Android APP存活檢測(cè)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03
Android中檢查網(wǎng)絡(luò)連接狀態(tài)的變化無(wú)網(wǎng)絡(luò)時(shí)跳轉(zhuǎn)到設(shè)置界面
這篇文章主要介紹了Android中檢查網(wǎng)絡(luò)連接狀態(tài)的變化無(wú)網(wǎng)絡(luò)時(shí)跳轉(zhuǎn)到設(shè)置界面,需要的朋友可以參考下2017-06-06
Android中使用Gson解析JSON數(shù)據(jù)的兩種方法
Json是一種類似于XML的通用數(shù)據(jù)交換格式,具有比XML更高的傳輸效率;本文將介紹兩種方法解析JSON數(shù)據(jù)，需要的朋友可以參考下2012-12-12
很多時(shí)候，我們需要一些特效功能，比如給圖片做個(gè)濾鏡什么的，那么如果在flutter中，如果要實(shí)現(xiàn)這樣的濾鏡功能應(yīng)該怎么處理呢？一起來(lái)看看吧2023-06-06
Jetpack Compose實(shí)現(xiàn)對(duì)話框和進(jìn)度條實(shí)例解析
對(duì)話框和進(jìn)度條其實(shí)并無(wú)多大聯(lián)系，放在一起寫是因?yàn)閮烧叩膬?nèi)容都不多，所以湊到一起，對(duì)話框是我們平時(shí)開(kāi)發(fā)使用得比較多的組件，進(jìn)度條的使用頻率也很高，比如下載文件，上傳文件，處理任務(wù)時(shí)都可以使用進(jìn)度條2023-04-04
Android仿微信列表滑動(dòng)刪除之可滑動(dòng)控件（一）
這篇文章主要為大家詳細(xì)介紹了Android仿微信列表滑動(dòng)刪除之可滑動(dòng)控件，具有一定的實(shí)用性和參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
android TextView多行文本(超過(guò)3行)使用ellipsize屬性無(wú)效問(wèn)題的解決方法
這篇文章介紹了android TextView多行文本(超過(guò)3行)使用ellipsize屬性無(wú)效問(wèn)題的解決方法，有需要的朋友可以參考一下2013-09-09