1479人阅读
Visual Studio Emulator for Android 模拟器国内这网络环境不太好用，所以使用海马玩模拟器，给大家推荐一下！下面开始配置环境：
1）下载JDK，配置JDK环境1.8以上
/article/6dada123e36ea3.html
2）下载Android Studio
配置Android SDK环境，SDK的platform-tools、tools两个子目录加入系统PATH环境变量
C:\Users\...\Sdk\C:\Users\...\Sdk\platform-
注：Android SDK Build-Tools 必须是23.0.1
3）下载Python 2，配置Python环境
注：不支持Python3
4）下载NodeJs，配置NodeJS环境
注：4.1+版本
5）设置国内镜像，加速环境搭建
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
6）安装React Native命令行工具
通过NodeJs自带的npm命令管理工具（react-native-cli）安装
npm install -g react-native-cli
7）工作目录下创建项目
react-native init MyProject
注：耐心等待N...分钟，一般过程会非常慢，数小时左右。失败的话，多试几次
8）安装Android模拟器
注：本人使用的是海马玩模拟器（0.10.3 beta版），adb端口为26944
9）连接安卓设备
adb connect 127.0.0.1:26944
10）工作目录下运行packager
react-native start
注：浏览器访问&等待N...秒看到打包后的脚本，说明服务启动成功
11）工作目录下运行安卓（Android）
react-native run-android
注：首次运行需要等待N...分钟并从网上下载gradle依赖。运行完毕后可以在模拟器看到应用已经启动。
如果apk安装运行出现报错，请仔细查看报错信息和相关环境配置是否正确。如果，看到APP红屏报错，说明环境已经搭建好了。
12）配置packager服务
摇晃设备（海马模拟器在-&更多里面），可以打开调试菜单
点击Dev Settings，选Debug server host for device，输入本机IP加:8081（如：192.168.3.35:8081），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就可以看到运行结果。
注：双击R也可以Reload JS，就不用摇晃模拟器了
13）大功告成！步骤6以下的过程（除了安装海马玩模拟器）会非常的慢，而且过程中会报错、无响应等等。只需要等！！！主要看网速，没办法天朝的网络被墙了（用VPN的土豪可以略过）！报错就重新来一遍，亲测是没问题的。
注：安装Android SDK Build-Tools 23.0.1的过程参看：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：9551次
排名：千里之外学了一段RN了，想自己做个东西练练手。于是准备做一个App启动的展示页，可以左右滑动切换，并且底部有当前页提示，效果图如下：
1）组件层级关系
总体来说就是分三块：一个View组件作为父容器，包裹一ViewPagerAndroid 组件和用View模拟的一个页面切换展示组件。
2）首先是头部引用ViewPagerAndroid组件，代码为：
/*左右翻页组件*/
&ViewPagerAndroid
style={styles.container}
//绑定事件，引用时要在函数末尾加bind(this)
onPageSelected={this.onPageSelected.bind(this)}
//初始化页面为第一个页面，从0开始
initialpage={0}&
&View style={styles.container}&
&Image source={require('../../res/img/p1.jpg')} style={styles.image}&&/Image&
&Text style={styles.welcome}&
医生叫我进行光合作用{'\n'}
不要熬夜了
&View style={styles.container}&
&Image source={require('../../res/img/p2.jpg')} style={styles.image}&&/Image&
&Text style={styles.welcome}&
人生不断向前的秘诀{'\n'}
就是忘记从那里来 记得到哪里去
&View style={styles.container}&
&Image source={require('../../res/img/p3.jpg')} style={styles.image}&&/Image&
&Text style={styles.welcome}&
人生路虽漫长{'\n'}
但是关键的就那几步
&View style={styles.container}&
&Image source={require('../../res/img/p1.jpg')} style={styles.image}&&/Image&
&Text style={styles.welcome}&
欢迎使用原点APP
&/ViewPagerAndroid&
此组件使用起来很简单，就是ViewPagerAndroid里面包裹几个View组件，里面View的个数就是切换页面的数量。用到的属性有两个initialpage和onPageSelected。Initialpage就是定义初始化页面，initialpage={0}就是初始化页面为第一个页面，从0开始；onPageSelected监听页面滑动，e.nativeEvent.position代表当前页面的索引值。使用时注意，绑定事件时末尾要加上bind(this),否则会报错。
3）用View模拟页面切换提示效果，代码为：
//监听页面变化
onPageSelected=function(e) {
//默认从0开始，0是第一页
this.setState({page: e.nativeEvent.position});
console.log('CurrentPage: '+e.nativeEvent.position);
ToastAndroid.show('CurrentPage: '+e.nativeEvent.position, ToastAndroid.SHORT);
/*模拟页面选中*/
&View style={styles.slider}&
&View style={styles.ol}&
&View style={page==0?styles.currt:styles.li}&&/View&
&View style={page==1?styles.currt:styles.li}&&/View&
&View style={page==2?styles.currt:styles.li}&&/View&
&View style={page==3?styles.currt:styles.li}&&/View&
本部分代码从里往外讲吧，里面4个View模式的是四个小圆点的效果。当前页面显示时通过调用Code1方法修改page的值，然后通过三目运算符判断切换显示样式，效果为原点拉长为椭圆形。
4）代码样式：
const styles = StyleSheet.create({
backgroundColor:'#CCFF66',
container: {
justifyContent: 'space-around',
alignItems: 'center',
width:300,
height:300,
borderRadius:150,
welcome: {
fontSize: 16,
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'rgba(0,0,0,0.3)',
height:20,
justifyContent:'space-around',
alignItems: 'center',
flexDirection:'row',
borderRadius:10,
margin:20,
backgroundColor:'rgba(255,255,255,1.0)',
height:10,
borderRadius:5,
backgroundColor:'rgba(255,255,255,1.0)',
height:10,
borderRadius:5,
简单做个介绍，当然布局采用的四Flex布局，使用圆形效果注意两点即可：
1、宽高相等；2、borderRadius是高度（宽度）的一半。
5）项目完整代码：
拷贝代码请修改组件名HelloWorld为自己项目的名字，否则会报错。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：9552次
排名：千里之外}