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

最新推荐文章于 2025-06-09 17:58:20 发布

zxc123e

最新推荐文章于 2025-06-09 17:58:20 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： android 文章标签： android react-nati

本文链接：https://blog.youkuaiyun.com/zxc123e/article/details/51426332

android 专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍React Native项目搭建步骤，包括JDK、AndroidSDK、node.js安装及配置，通过实例演示项目初始化、运行流程，解决常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装JDK
二、安装Android SDK
这里写图片描述
三、安装C++环境
网上很多以前的资料（其实就是那一份）都说安装Visual Studio 2013或2015，编译node.js的C++模块时需要用到。这里我没安装，我的系统是win7，好像win7自带了编译C++的工具,然后之前安装过了c-free这个软件，又考虑到电脑承受能力，所以没就安装大的软件。等后面有问题了再说。事实在后面没有出现这方面的问题。

四、安装node.js
从官网下载node.js的官方4.1版本或更高版本。安装好后在命令行下执行node -v命令是否成功，成功会显示版本信息。这个本人之前已安装。
安装react-native
命令行下运行命令

npm install -g react-native-cli

五、初始化项目
在电脑上任何一个地方创建一个目录，例如我在E盘创建一个MyProject的目录，然后命令行下进入到MyProject目录，执行命令：

react-native init MyProject

这里需要耐心等待几分钟，使网络情况而定。这里MyProject是随便取的，执行上面的命令后，在我的MyProject目录下生成了MyProject目录，这个目录包含了整个项目的文件，初始化成功后在命令行最后会显示下面的信息
这里写图片描述

六、运行package
上面init之后，我们可以运行react-native run-android命令，如果成功的话，可以将应用安装到真机或模拟器，我这里使用的是真机。但是安装之后可能什么也显示不了，还会有一些错误信息。这是由于手机获取不到显示view的文件，那么这时候我们就需要运行package.在项目目录，输入react-native start并执行，等待一段时间：
这里写图片描述

这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。
这里写图片描述

七、运行项目
刚刚运行package的命令行不要关闭，重新启动一个新的命令行，
进入项目目录，输入react-native run-android命令并执行，这个过程需要几分钟的时间
这里写图片描述
在这个过程中可能会出现一些问题，导致build失败：
1. 你没有配置ANDROID_HOME,需要再系统变量中加入这个，指到sdk目录。
2. android sdk的版本太旧了，最低需要android-23
3. 需要新的Android Support Repository
成功会显示：
这里写图片描述
在运行命令之前，手机要连上电脑，adb devices命令下可以看到设备，手机和电脑应在同一个局域网上，这个后面会用到。
经过上面的折腾之后项目安装到手机上了，如果你打开应该手机显示一片白，请检查是否开启悬浮框权限，开启之后会显示成下图：
这里写图片描述
这里使用一下别人的图片，我做的时候没截这个图。这里警告信息可能有差别。
第一次都会出现上面的情况，这是需要摇一摇，打开开发者菜单，点击Dev Settings后，点击Debug server host & port for device,设置IP和端口
这里写图片描述
这里的IP是电脑的IP，不知道的可以在命令行中输入ipconfig进行查询，端口号固定8081。这里我们应该想到为什么需要第六步的原因。
设置完成后，回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来，出现Welcome to React Native！
这里写图片描述
至此，整个项目就跑起来了，万里长征迈出了100步！

八、欢迎页
最后的稍稍分析一下欢迎也是如何显示出来的。
在项目目录MyProject目录下有个文件index.android.js文件，打开这个文件，会有一段代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class MyProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('MyProject', () => MyProject);

在android目录 app下一直找到MainActivity.java文件，里面有个方法：

/**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "MyProject";
    }

这个方法就是显示AppRegistry里注册的MyProject组件。欢迎页的内容就是这么显示出来的。