Windows下React Native的Android环境部署及布局示例

所属分类：软件编程 / Android 阅读数： 1538

收藏 0赞 0分享

搭建基础环境

JDK（必须，不解释）
SDK（建议使用Android Studio，集成SDK以及模拟器）
genymotion（如果是使用真机或者Android Studio自带的模拟器，可以选择不装）
NVM（node版本控制器，需要node4.0以上版本）

以上配置不是必须，可自行选择适合自己的环境，部分安装过程可能会涉及到翻墙，需要配置代理

配置踩坑记录
genymotion
这里选择genymotion模拟器来讲解，也会提一下Android Studio自带的模拟器的一些注意点，使用真机的朋友可跳过这段。
genymotion的安装有2种模式，一种是带有Oracle VM VirtualBox虚拟机，另外一种是纯净版，genymotion的运行依赖VirtualBox虚拟机。

选择下载android6.0-API 23模拟器

2016310144554616.png (794×248)

（如果无法显示API列表，请配置代理Settings->NetWork->Use HTTP Proxy）
启动模拟器，可能会有部分人卡在android启动界面上面，无法进入

2016310144618611.png (521×245)

genymotion的运行基于X86的架构，比起arm，X86的性能更流畅。我们需要使用X86架构的话，还需要安装HAXM。

1、打开SDK Manager->Extras->Intel x86 Emulator Accelerator，安装即可，如果没有任何东西显示，还是代理问题，Tools->Options->Proxy Settings
2、进入C:\Users\用户\AppData\Local\Android\sdk\extras\intel\Hardware_Accelerated_Execution_Manager
安装intelhaxm-android.exe，安装出错，请参考这里

至此我们就能进入模拟器界面

Android Studio
如果想使用android studio自带模拟器，可以打开AVD Manager->Create Virtual Device->选择自己需要的android版本
值得注意的是，模拟器默认选择X86架构，如果你不喜欢，你需要自己手动改成arm架构

2016310144659242.png (1351×319)

NVM
这里选择用NVM来控制node版本，如果你已经装过node4.0以上的版本，就跳过这里。
安装方式和使用文档，github上面讲的很清楚，这里说下代理的配置，其实也就是npm的代理，配置全局代理

npm config set proxy=you proxy
npm config set https-proxy=you https proxy

React-native初始化
心理默默祈祷以下命令千万不要错误。。。

npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native start
react-native run-android

果然。。。好吧，这里分享下自己遇到的一些问题

npm install -g react-native-cli：出错的最大可能就是node版本低于4.0或者代理没配置成功
react-native run-android：这个命令会下载gradle依赖，执行失败的原因大部分也是因为代理的问题

进入C:\Users\用户\AppData\.gradle，打开gradle.properties（不存在就新建一个），修改

systemProp.https.proxyHost=You https proxy
systemProp.https.proxyPort=You https proxyPort
systemProp.http.proxyHost=You proxy
systemProp.http.proxyPort=You proxyPort

总算是把android应用程序跑起来了，真累人啊

2016310144802849.png (537×531)

布局
这里以三种经典布局来讲解react-native布局概念，主要以flexbox为主，react native中有两个基本元素< View >与< Text >，分别类似于web端div和span，用于布局和修饰。需要注意的是，react native不是所有的CSS属性都支持，这里有react native所支持的CSS属性。

准备工作
在JSX中写样式还是有点不习惯，这里使用react-native-css模块来编写样式，安装、使用过程如下：

npm install react-native-css -g 
react-native-css -i style.css -o style.js --watch

布局讲解
左右布局
由于是横向布局，我们需要flex-direction: row（默认纵向布局），左右以1:1方式排版，就都需要flex:1，布局容器也需要加上flex:1，表示为伸缩容器。由于react native没有br标签，需要换行只能将换行符插入。

样式表：

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;
}

页面结构：

<View style={styles.wrap}>
  <View style={styles.left}>
   <Text style={styles.text}>
    这是左侧栏{'\n'}
    这是左侧栏{'\n'}
    这是左侧栏{'\n'}
    这是左侧栏{'\n'}
   </Text>
  </View>
  <View style={styles.right}>
   <Text style={styles.text}>
    这是右侧栏{'\n'}
    这是右侧栏{'\n'}
    这是右侧栏{'\n'}
    这是右侧栏{'\n'}
   </Text>
  </View>
</View>

2016310144925872.png (629×1074)

左中右布局
左右定宽，中间占满。

样式表：

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;
}

页面结构：

<View style={styles.wrap}>
  <View style={styles.left}>
   <Text style={styles.text}>
    这是左侧栏{'\n'}
    这是左侧栏{'\n'}
    这是左侧栏{'\n'}
    这是左侧栏{'\n'}
   </Text>
  </View>
  <View style={styles.centent}>
   <Text style={styles.text}>
    这是内容区{'\n'}
    这是内容区{'\n'}
    这是内容区{'\n'}
    这是内容区{'\n'}
   </Text>
  </View>
  <View style={styles.right}>
   <Text style={styles.text}>
    这是右侧栏{'\n'}
    这是右侧栏{'\n'}
    这是右侧栏{'\n'}
    这是右侧栏{'\n'}
   </Text>
  </View>
</View>

2016310145019856.png (630×1090)

上中下布局
类似新闻和门户APP的布局，上下贴边，中间为内容区。

样式表：

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;
}

页面结构：

<View style={styles.wrap}>
  <View style={styles.top}>
   <Text style={styles.text}>
    头部信息
   </Text>
  </View>
  <View style={styles.centent}>
   <Text style={styles.text}>
    这是内容区{'\n'}
   </Text>
  </View>
  <View style={styles.bottom}>
   <Text style={styles.text}>
    尾部信息
   </Text>
  </View>
</View>

综合布局
简单模拟网易新闻APP布局：

2016310145058347.jpg (720×1280)

我们可以简单看看APP布局方式，总体来说就是上中下的布局方式，我们可以初步先编写外部结构
页面结构：

<View style={styles.wrap}>
  <View style={styles.top}>
   <Text>头部</Text>
  </View>
  <View style={styles.cententWrap}>
   <Text>新闻主题</Text>
  </View>
  <View style={styles.bottom}>
   <Text>
    尾部导航
   </Text>
  </View>
</View>

样式表：

wrap {
 flex:1;
 flex-direction:column;
}
top{
 height: 40;
 background-color: #EC403C;
}
cententWrap{
 flex:1;
 flex-direction:column;
}
bottom{
 height: 40;
}

大致结构算是搭建完毕，开始完善头部展示（偷懒、不想切图，就用个title代替就好啦~~~）
页面结构：

<View style={styles.wrap}>
  <View style={styles.top}>
   <Text style={styles.topTitle}>网易</Text>
  </View>
  <View style={styles.cententWrap}>
   <Text>新闻主题</Text>
  </View>
  <View style={styles.bottom}>
   <Text>
    尾部导航
   </Text>
  </View>
</View>

样式表：

topTitle{
 margin-top: 15;
 margin-left: 20;
 text-align: left;
 font-size: 14;
 color:#FFF;
}

头部内容完成之后，就完善内容区域的导航条，但是react-native并没有提供ul、li标签（也许以后有），这个是要View来代替ul，Text代替li，代码和数据如下：
页面结构：

var cententNav = ['头条', '热点', '娱乐', '体育', '财经'];
return (
 <View style={styles.wrap}>
  <View style={styles.top}>
   <Text style={styles.topTitle}>网易</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>
    尾部导航
   </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属性，这里会用到一个ScrollView的滚动条组件来展示新闻概述，篇幅可能较长，底部就不再编写了（就是懒~~），大家各自完善吧，以下是全部的布局代码和样式。

页面结构：

render: function() {
// var repeatArr = Array(100).join("1").split("")
var cententNav = ['头条', '热点', '娱乐', '体育', '财经'],
  NEW_DATA = [
   {
    img: "http://7xl041.com1.z0.glb.clouddn.com/new1.png",
    title: "李克强宴请上合各参会领导人",
    content: "称会议阐释了上合组织\“大家庭\”的深厚友谊和良好氛围",
    typeImg: "http://7xl041.com1.z0.glb.clouddn.com/new-type1.png"
   },
   //.....类似数据
  ];

return (
 <View style={styles.wrap}>
  <View style={styles.top}>
   <Text style={styles.topTitle}>网易</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>
   <ScrollView style={styles.centent}>
    {
     NEW_DATA.map(function(el, index){
      return (
       <View>
        <View style={styles.cententLi}>
         <Image source={{uri: NEW_DATA[index].img}} style={styles.cententImg} />
         <View style={styles.rightCentent}>
          <Text style={styles.cententTitle}>{NEW_DATA[index].title}</Text>
          <Text style={styles.cententCentent}>{NEW_DATA[index].content}</Text>
         </View>
         <Image source={{uri: NEW_DATA[index].typeImg}} style={styles.cententType} />
        </View>
        <View style={styles.line}></View>
       </View>
      )
     })
    }
   </ScrollView>
  </View>
  <View style={styles.bottom}>
   <Text style={styles.text}>
    尾部信息
   </Text>
  </View>
 </View>
);
}

样式表：

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;
}

更多精彩内容其他人还在看

Windows下React Native的Android环境部署及布局示例

Android控件系列之CheckBox使用介绍

Android控件系列之EditText使用方法

Android控件系列之TextView使用介绍

asynctask的用法详解

Android开发旋转屏幕导致Activity重建解决方法

Notification与NotificationManager详细介绍

android LinearLayout和RelativeLayout组合实现精确布局方法介绍

android listview优化几种写法详细介绍

Android应用开发SharedPreferences存储数据的使用方法

Android之PreferenceActivity应用详解

网络赚钱

站长故事

Windows下React Native的Android环境部署及布局示例

Android控件系列之CheckBox使用介绍

Android控件系列之EditText使用方法

Android控件系列之TextView使用介绍

asynctask的用法详解

Android开发 旋转屏幕导致Activity重建解决方法

Notification与NotificationManager详细介绍

android LinearLayout和RelativeLayout组合实现精确布局方法介绍

android listview优化几种写法详细介绍

Android应用开发SharedPreferences存储数据的使用方法

Android之PreferenceActivity应用详解

网络赚钱

站长故事

Android开发旋转屏幕导致Activity重建解决方法