windows上搭建react native环境

一、配置环境

1.准备相关资源

 AndroidStudio Android开发集成开发环境（推荐下载含SDK tools版）

 JDK for Windows Java Develop Kit（java开发工具）

 Nodejs nodejs环境

2.ReactNative环境配置步骤

 1) 使用npm安装ReactNative

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

1

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程序

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

1

react-native init HelloAndroid

   完成目录结构：

       

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

       

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

1

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。在当前文件路径呼出命令行，输入：

1

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 入口函数：

1

2

3

4

5

6

7

8

9

10

import
Demo
from
'./android_src/Demo';

class
HelloAndroid
extends
Component
{

  render()
{

    return
(

      <View
style={styles.container}>

        <Demo></Demo>

      </View>

    );

  }

}

 首页Demo.js：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

/**

* 首页

*/

import
React,
{Component,
ScrollView}
from
'react-native';

import
Slider
from
'./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
(

          
<ScrollView
style={{flex:1,marginBottom:50}}>

                <Slider
data={this.state.banner}/>

            </ScrollView>);

    }

}

 

module.exports
=
Demo;

  轮播组件函数Slider.js：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

/**

* 轮播组件

*/

import
React,
{

    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
(

                <View
style={{flexDirection:
'column'}}
key={i}>

                    <TouchableOpacity
delayPressIn={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;

 运行结果：

    

演示动画(因篇幅关系，轮播序号圆点的代码不包含在以上代码中)：

    

五、搭建过程遇到的问题

1.比较常见的MSBuild错误

   这个错误出现的频率比较高，一般是安装与window环境相关的node包时可能会出现，比如node-gyp会报这个错，报错形式为：MSBUILD：error MSB3248 ...

   

   解决方式：

   VisualStudio2013Express 微软的IDE(如本地环境有或更高版本则无须)

   Win7 SDKs 7.1 windows开发工具包(如本地环境有则无须)

   Win7：安装VisualStadio2013 + Win7 SDKs 7.1

如Win7 SDKs 7.1安装失败，可以卸装电脑上的

              Visual c++ 2010 x86 redistributable及Visual c++ 2010 x64 redistributable再重   试

   Win8: 安装VisualStadio2013

2.folly::toJson兼容错误

  在目前版本的RNA上遇到了这个错误，

    

   经过了一番调试及查找答案，发现是alignItems: 'center'这个样式引起的，具体参见issue，把alignItems
修改为alignItems: 'stretch'即可

时间： 2024-09-30 16:44:23

windows上搭建react native环境的相关文章

在Windows下搭建React Native Android开发环境

安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变量. 安装Android SDK 可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装.推荐使用Android Studio,以下说明会默认以Android Studio的方式说明.请注意选择x86还是x64版本. 为了加速下载,推荐从AndroidDevTools下载. 然后进入SDKManager(可通过Andro

《React Native移动开发实战》一一1.3 搭建React Native开发环境

1.3 搭建React Native开发环境 "磨刀不误砍柴工",在正式开发React Native应用之前,需要先搭建好React Native的开发环境.搭建React Native开发环境有以下几个主要步骤. 原生开发工具:iOS开发使用Xcode,Android开发使用Android Studio and SDK Tools. Node.js(https://nodejs.org/):React Native是借助Node.js,即JavaScript运行时来创建JavaScr

window环境下搭建react native及相关插件

可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting-started.html. 在官方文档中,只给出在Window上安装React Native的教程,没有给Mac下的教程,我在网上找了半天,找了部分内容,又根据自己的理解整理了一下 1.安装Java 这里需要注意对环境变量的设置,可以根据java -version来检测一下 2.安装SDK 这里需要

windows上自动设置java环境变量的脚本

原文:windows上自动设置java环境变量的脚本 近期打算学习安卓开发,于是乎要准备java开发环境,安装好jdk后,就要设置java环境变量,java环境变量要设置JAVA_HOME,Path,CLASSPATH三个值,每次配置查百度复制粘贴都很麻烦,所以想着偷懒下,用脚本直接执行就很快了,搜了下bat的命令,写了个配置java环境变量的脚本. 这里默认设置了java jdk的安装路径为C:\Program Files\Java\jdk1.7.0_71,如果你的jdk安装路径不在此,可在执

linux-Linux上搭建安卓开发环境出错

问题描述 Linux上搭建安卓开发环境出错 在最后一步运行./studio.sh时没能打开Android Studio,提示是内部错误,请问是什么原因怎么解决? 解决方案 Linux下搭建Android开发环境 为什么要在Linux搭建开发环境呢?从直观来说,Android虚拟机在Linux下运行速度更快,而且性能更稳定. 我使用的Linux环境是ubuntu-10.10-desktop-i386.安装前所需要准备的软件: ????1. JDK(jdk-6u27-li......答案就在这里:L

CentOS上搭建PHP服务器环境的步骤与方法_服务器其它

本文实例讲述了CentOS上搭建PHP服务器环境的步骤与方法.分享给大家供大家参考,具体如下: 安装apache: yum install httpd httpd-devel 启动apache: /etc/init.d/httpd start 此时输入服务器的IP地址,应该看到apache的服务页面,端口不用输,apache默认就是使用80端口 安装mysql: yum install mysql mysql-server 启动mysql: /etc/init.d/mysqld start 安装

Windows环境下搭建React Native

随着移动开发越来越火热,前端开发也是有之前11年一直火热到现在,不过我发现从去年年底开发,Android和ios基本已经饱和了,特别是随着广大开源社区的中很多人贡献代码,开发已经不是什么问题了,所以现在好多公司招聘 都要求3年以上工作经验的,无外乎好多培训班出来的会写一些功能,会写一些界面实现,就出来上班了,但是深层次到framwork层,能够深入了解原理的还是少数,特别是当我们的项目遇到瓶颈之后,才能去看看你们怎么实现的.废话说道这里. 接下来我想说说面试,往往人家会要求会一点js,会一点ht

React Native 环境搭建和创建项目(Mac)

 (一) 搭建基本环境(必要) 使用React Native开发iOS应用需要OSX系统,Xcode,Homebrew,node,npm,也可以有选择的使用watchman .Flow. 1. 安装Homebrew Homebrew, 简称brew, Mac系统的包管理器, 用于安装NodeJS和一些其他必需的工具软件. Home-brew 的使用方式: 1)搜索软件:brew search 软件名,如brew search wget 2)安装软件:brew install 软件名,如brew

深入体验bash on windows，在windows上搭建原生的linux开发环境，酷！

1 安装 你必须安装开发者预览版本,才能使用windows的linux subsystem功能. 首先打开你的Windows 10的设置,在"更新和安全"选项中(我的机器是英文操作系统,但中文操作系统类似),选择"开发者",然后选择"开发者模式": 在Windows 更新和安全选项中,选择"Windows 更新",在"更新设置"中选择高级选项,你必须打开"内部预览版本"选项,并且将内部预