首页 / JavaScript

React Native for Android Windows环境搭建

腾讯AlloyTeam 2016-03-30 16:03:47 浏览 1,342 次

标签 React React Native

环境搭建

1.准备工作

AndroidStudio 安卓开发IDE 推荐下载含SDK tools版

JDK for Windows Java软件开发工具包

Nodejs nodejs环境

2.安装ReactNative步骤

1) 使用npm安装ReactNative

在cmd命令工具中执行以下命令，注意并非 install react-native，装了react-native在后面init项目的时候会报错，需要卸掉再重装。

npm install -g react-native-cli

2)可能遇到的问题：

报错：npm-install-save-react-native-failed

解决办法：升级nodejs及npm版本

报错：'xxx’不是内部或外部命令

解决办法：设置对应命令为环境变量或安装对应的命令工具

3.安卓环境搭建

1)JDK安装

运行已下载的jdk-xxxx-windows-x64.exe进行安装，如本地已有JDK可跳过本条。

2)AndroidStudio安装

运行已下载的android-studio-bundle-xxx-windows.exe进行安装

安装Android Studio完毕后，需要检查Android SDK是否齐全，对应需要的SDK如下所示：

ReactNative开发调试体验

1.HelloWorld程序

在AndroidStudio中创建一个Android HelloWorld程序：

2.调试手机启用开发者模式并连接USB选择允许调试

开启开发者模式方式以小米机型为例参考小米手机示例。

3.运行HelloWorld

点击运行并在列表中选择调试的手机，确定后手机会自动安装我们的HelloWorld程序：

保持程序运行状态，我们可以在AndroidStudio控制台上查看程序输出的log日志及CPU/内存等占用情况。

4.HelloAndroid程序

使用命令行工具运行命令：

react-native init HelloAndroid

完成目录结构：

在AndroidStudio上打开HelloAndroid/android目录，等待gradle构建完毕后运行HelloAndroid程序，可以看到以下ReactNatibe经典报错UI，这是因为我们还未连接上react-native的编译bundle文件而导致出现的错误页面。

下面我们来运行Android ReactNative构建命令：

react-native start

注意这里不是使用run-android，run-android适用于直接在机器上运行调试app。

当构建完毕，在浏览器中访问http://localhost:8081/index.android.bundle?platform=android可以看到我们编译好的android bundle文件。

调试方式

1.配置host方式:

摇晃手机调出app debug菜单选项 ->选择Dev Settings-> 选择Debug server host & port for device -> 填写PC局域网IP及端口(命令行输入ipconfig可查看本机ip)

如上图，填写192.168.1.100:8081即可，回退到主界面，再次摇晃手机调出app debug 菜单选项 ->选择 Reload JS，此时可以看到ReactNative的应用首页：

2.Android5.0以上版本命令方式：

打开Android SDK目录 xxx\Android\sdk\platform-tools。在当前文件路径呼出命令行，输入：

adb reverse tcp:8081 tcp:8081

点击Reload JS 即可成功拉取ReactNative bundle。

注意：adb命令可以添加到windows全局变量中，这样无需在xxx\Android\sdk\platform-tools目录下执行adb命令，可以在AndroidStudio的Terminal命令行工具下使用

3.模拟器调试方式

安卓模拟器在win平台上性能表现不是很好，我们可以安装英特尔® 硬件加速执行管理器来进行一些性能上的提升（需要Intel的CPU），安装完毕后在AndroidStudiao的菜单点击打开虚拟设备管理器，选择创建一个Android虚拟设备（需求不同的Android版本需要下载对应的SDK Tool）并启动。

当Android虚拟设备启动成功后，运行HelloAndroid 应用app，选择已启动的虚拟设备即可在虚拟设备上打开我们的HelloAndroid。

编写一个示例RNA轮播

index.android.js 入口函数：

import Demo from'./android_src/Demo';
classHelloAndroidextendsComponent{
  render(){
    return(
      <View style={styles.container}>
        <Demo></Demo>
      </View>
    );
  }
}

首页Demo.js：

/**
 * 首页
 */
import React,{Component,ScrollView}from'react-native';
import Slider from'./Slider';

classDemoextendsComponent{
    constructor(props){
        super(props);
        this.state={
            banner:[
            {banner_url:'http://ossweb-img.qq.com/images/lol/web201310/skin/big80006.jpg'},
            {banner_url:'http://i12.tietuku.com/707b3565e98e1398s.jpg'},
            {banner_url:'http://imga1.pic21.com/bizhi/140226/07916/s04.jpg'}]
        };
    }

    render(){
        return(
           <ScrollView style={{flex:1,marginBottom:50}}>
                <Slider data={this.state.banner}/>
            </ScrollView>);
    }
}

module.exports=Demo;

轮播组件函数Slider.js：

/**
 * 轮播组件
 */
import React,{
    Image,
    Text,
    View,
    ViewPagerAndroid,
    StyleSheet,
    Dimensions,
    TouchableOpacity
}from'react-native';

varSlider=React.createClass({
    getInitialState(){
        return{
            currentPage:0,
            viewWidth:0,
            renderStatus:false
        };
    },
    render(){
        // 获取待渲染的图片数据
        varimgsRenderData=this.getImgsRenderData(this.props.data);
        // 将图片列表数据逐个映射到JSX中
        varimgs=imgsRenderData.map((banner,i)=>{
            console.log(banner.banner_url);
            return(
                <View style={{flexDirection:'column'}}key={i}>
                    <TouchableOpacity delayPressIn={0}style={{flex:1}}>
                        <Imagekey={i}source={{uri:banner.banner_url}}style={{flex:1}}/>
                    </TouchableOpacity>
                </View>
            );
        });
        // var dots = this.renderDots();
        return(
            <View>
                <ViewPagerAndroid
                    style={{flex:1,height:160}}
                    initialPage={1}
                    ref={viewPager=>{this.viewPager=viewPager;}}
                    onPageScroll={this.onPageScroll}
                    onPageSelected={this.onPageSelected}>
                    {imgs}
                </ViewPagerAndroid>
            </View>
        );
    },
    getImgsRenderData(data){
        // 判断当前的轮播序号，重新对图片顺序进行组装
        varimgsRender=[];
        varimgsLent=data.length;
        varindexNum=this.state.currentPage;
        // 这里的代码有点乱，还有优化空间
        if(imgsLent>1&&indexNum===0){
            imgsRender.push(data[imgsLent-1]);
        }else{
            imgsRender.push(data[indexNum-1]);
        }

        imgsRender.push(data[indexNum]);

        if(imgsLent>1&&indexNum===imgsLent-1){
            imgsRender.push(data[imgsLent-1]);
        }else{
            imgsRender.push(data[indexNum+1]);
        }
        returnimgsRender;
    },
    onPageSelected(event){
        // 当前分页被选中
        varlastPage=this.state.currentPage;
        varselectPage=event.nativeEvent.position;
        varcurrentPage=lastPage+selectPage-1;
        varimgsLent=this.props.data.length;

        if(currentPage===-1){
            currentPage=imgsLent-1;
        }elseif(currentPage===imgsLent){
            currentPage=0;
        }

        this.setState({
            currentPage:currentPage
        });
        this.viewPager.setPageWithoutAnimation(1);
    }
});
varstyles=StyleSheet.create({
  tab:{
    alignItems:'stretch',
  },
  tabs:{
    flexDirection:'row',
    alignItems:'stretch',
    justifyContent:'center',
  }
});
module.exports=Slider;

运行结果：