转载

React Native for Android Windows环境搭建

环境搭建

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进行安装

React Native for Android Windows环境搭建

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

React Native for Android Windows环境搭建

ReactNative开发调试体验

1.HelloWorld程序

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

React Native for Android Windows环境搭建

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

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

3.运行HelloWorld

React Native for Android Windows环境搭建

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

React Native for Android Windows环境搭建

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

React Native for Android Windows环境搭建

4.HelloAndroid程序

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

react-native init HelloAndroid

完成目录结构：

React Native for Android Windows环境搭建

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

React Native for Android Windows环境搭建

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

react-native start

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

React Native for Android Windows环境搭建

当构建完毕，在浏览器中访问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)

React Native for Android Windows环境搭建

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

React Native for Android Windows环境搭建

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。

React Native for Android Windows环境搭建

编写一个示例RNA轮播

index.android.js 入口函数：

importDemofrom './android_src/Demo'; class HelloAndroid extends Component {   render() {     return (       <Viewstyle={styles.container}>         <Demo></Demo>       </View>     );   } }

首页Demo.js：

/** * 首页 */ importReact, {Component, ScrollView} from 'react-native'; importSliderfrom './Slider';   class Demo extends Component {     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 (           <ScrollViewstyle={{flex:1,marginBottom:50}}>                 <Sliderdata={this.state.banner}/>             </ScrollView>);     } }   module.exports = Demo;

轮播组件函数Slider.js：

/** * 轮播组件 */ importReact, {     Image,     Text,     View,     ViewPagerAndroid,     StyleSheet,     Dimensions,     TouchableOpacity } from 'react-native';   var Slider = React.createClass({     getInitialState() {         return {             currentPage: 0,             viewWidth: 0,             renderStatus: false         };     },     render(){         // 获取待渲染的图片数据         var imgsRenderData = this.getImgsRenderData(this.props.data);         // 将图片列表数据逐个映射到JSX中         var imgs = imgsRenderData.map((banner, i) => {             console.log(banner.banner_url);             return (                 <Viewstyle={{flexDirection: 'column'}} key={i}>                     <TouchableOpacitydelayPressIn={0} style={{flex:1}}>                         <Image key={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) {         // 判断当前的轮播序号，重新对图片顺序进行组装         var imgsRender = [];         var imgsLent = data.length;         var indexNum = 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]);         }         return imgsRender;     },     onPageSelected(event){         // 当前分页被选中         var lastPage = this.state.currentPage;         var selectPage = event.nativeEvent.position;         var currentPage = lastPage + selectPage - 1;         var imgsLent = this.props.data.length;           if(currentPage === -1){             currentPage = imgsLent - 1;         }else if(currentPage === imgsLent){             currentPage = 0;         }           this.setState({             currentPage: currentPage         });         this.viewPager.setPageWithoutAnimation(1);     } }); var styles = StyleSheet.create({   tab: {     alignItems: 'stretch',   },   tabs: {     flexDirection: 'row',     alignItems: 'stretch',     justifyContent: 'center',   } }); module.exports = Slider;

运行结果：

React Native for Android Windows环境搭建