{"id":19545153,"url":"https://github.com/scscms/reactnative","last_synced_at":"2026-02-06T10:36:27.797Z","repository":{"id":93555085,"uuid":"76732527","full_name":"scscms/ReactNative","owner":"scscms","description":"Facebook推出的React Native，一起来学习吧","archived":false,"fork":false,"pushed_at":"2016-12-19T08:30:58.000Z","size":607,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T05:42:51.565Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scscms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-17T15:49:45.000Z","updated_at":"2018-11-12T02:33:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"5698405e-fa69-47d5-a983-398d93fa68cc","html_url":"https://github.com/scscms/ReactNative","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/scscms/ReactNative","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FReactNative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FReactNative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FReactNative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FReactNative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scscms","download_url":"https://codeload.github.com/scscms/ReactNative/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FReactNative/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261170425,"owners_count":23119513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T03:35:39.112Z","updated_at":"2026-02-06T10:36:22.772Z","avatar_url":"https://github.com/scscms.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## Window下安装React Native ##\n\n目的：Window 7 旗舰版下使用WebStorm开发NeactNative\n\n### 1、安装Nodo.js（自带npm）###\n\n安装的是node-v6.9.2-x64。并配置npm镜像\n\n\t$ npm config set registry https://registry.npm.taobao.org\n\t$ npm config set disturl https://npm.taobao.org/dist\n\n### 2、安装Git for Windows\n\n我的版本是Git-2.7.2-32-bit_setup.1457942412.exe\n在安装过程中，请务必记得勾选:\n`Use Git from the Windows Command Prompt`\n`Use Windows's default console window`\n这样会把Git的可执行程序加入到PATH环境变量中，这样其他程序才能在命令行中正确调用Git。\n\n\u003e 测试是否安装成功：\n\n\t$ git --version\n\n### 3、安装Python ###\n\n从官网下载并安装python 2.7.x\n我的版本是python-2.7.12.amd64.msi\n\n### 4、安装Yarn、React Native的命令行工具（react-native-cli）###\n\nYarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。\n\n\t$ npm install -g yarn\n\n安装react-native-cli建议先去github打包下载来安装，假如你不着急可直接执行命令：\n\n\t$ npm install -g react-native-cli\n\n**以下是下载安装:**\n\n先打开[react-native](https://github.com/facebook/react-native)的github网页，选择打包下载（最好用迅雷下载）,然后解压并执行命令：\n\n\t$ cd react-native-master/react-native-cli/\n\t$ npm install -g react-native-cli\n\n### 5、安装Java环境\n\n编译node.js的C++模块时需要用到。\n可以先根据命令`java -version`来检测一下。\n\n如果不符合就去[官网下载](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)并安装：\n\n我安装的是：jdk-8u112-windows-x64.exe\n\n\u003e重要设置系统变量：\n\n\tJAVA_HOME = C:\\Program Files\\Java\\jdk1.8.0_112;\n\tclasspath = %JAVA_HOME%\\lib\\tools.jar;\n\tpath = ...;%JAVA_HOME%\\lib;\n\n\u003e 测试是否安装成功：\n\n\t$ java -version\n\n### 6、安装Android Studio及SDK\n\n开启Gradle Daemon可以极大地提升java代码的增量编译速度。\n \n\t(if not exist \"%USERPROFILE%/.gradle\" mkdir \"%USERPROFILE%/.gradle\") \u0026\u0026 (echo org.gradle.daemon=true \u003e\u003e \"%USERPROFILE%/.gradle/gradle.properties\")\n\nReact Native目前需要[Android Studio](developer.android.com/sdk/index.html)2.0或更高版本。\n\n\u003e除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。\n\n![install](img/1.png)\n\n- 确定所有安装都勾选了，尤其是`Android SDK`和`Android Device Emulator`。\n\n![install](img/2.png)\n\n![proxy](img/3.png)\n\n- 选择`Setup Proxy`设置一下代理，方便安装插件。\n\n![proxy](img/4.png)\n\n- 配置Android SDK Manager的Proxy Settings\n \n\tHTTP Proxy Server = android-mirror.bugly.qq.com\n\n\tHTTP Proxy Port = 8080\n\n请务必选择: `Force https://... sources to be fetched using http://...`\n\n![install](img/5.png)\n\n\n- 选择`Custom`安装。\n\n![install](img/6.png)\n\n- 正经来说这里可以选择选择（而且要全部选择），但我这里不能操作，都已经默认安装（installed），直接下一步。并按两次`finish`按钮。\n\n\n![SDK Manager](img/7.png)\n\n\n- 点击`Configure`选择`SDK Manager`\n\n![settings](img/8.png)\n\n- 因为我们要安装`Android SDK Build-Tools 23.0.1`（必须是这个版本），但这里没有。所以我们点击`Launch Standalone SDK Manager`\n在SDK Tools窗口中勾选 `Android SDK Build-Tools 23.0.1`\n\n![SDK Manager](img/9.png)\n\n- 在Android 6.0(API 23)下勾选 `SDK Platform` `Intel x86 Atom_64 System Image` `Intel x86 Atom System Image` `Google APIs Intel x86 Atom_64 System Image`以及 `Google APIs`。\n\n![Packages](img/10.png)\n\n- 确定(Install)安装。此时会耗时比较久。\n\n![settings](img/11.png)\n\n安装好后就可以看到`Android 6.0(Marshmallow)`。\n\n将Android SDK的Tools目录添加到PATH变量中,打开控制面板 -\u003e 系统和安全 -\u003e 系统 -\u003e 高级系统设置 -\u003e 高级 -\u003e 环境变量 -\u003e 新建:\n\n\tANDROID_HOME=C:\\Users\\shine\\AppData\\Local\\Android\\Sdk\n\n\u003e 测试是否安装成功：\n\n\techo %ANDROID_HOME%\n\n将Android SDK的Tools目录添加到PATH变量中,打开控制面板 -\u003e 系统和安全 -\u003e 系统 -\u003e 高级系统设置 -\u003e 高级 -\u003e 环境变量 -\u003e 选中PATH -\u003e 双击进行添加：\n\n\tPATH = ....;C:\\Users\\shine\\AppData\\Local\\Android\\Sdk\\tools;C:\\Users\\shine\\AppData\\Local\\Android\\Sdk\\platform-tools;\n\n\u003e 测试是否安装成功：\n\n\techo %path%\n\n### 7、安装Genymotion（可选，但建议安装）###\n\n\u003e 假如你决定一直使用真机测试就飘过...\n\n#### 前提先安装VirtualBox软件\n\n我安装的是：VirtualBox-5.1.10-112026-Win.exe\n\n然后去https://www.genymotion.com/先注册并登录，然后下载和安装Genymotion安装（注册身份为个人开发者）\n\n然后启动Genymotion,选择添加模拟器并登录帐号。然后选择你要安装的安卓模拟器，主要是选择屏幕大小。文件比较大请耐心等待！\n\n#### 给Android Studio安装插件 ####\n\n选择菜单：File \u003e Settings \u003e Browse repositories... \u003e 搜索genymotion关键字，选择并安装。然后重启Android Studio就可以看到插件了。\n\n![genymotion](img/12.png)\n\n![genymotion](img/13.png)\n\n点击`Genymotion Device Manager`图标，并设置软件安装目录即可。\n\n![genymotion](img/14.png)\n\n再次点击`Genymotion Device Manager`图标，接着安装模拟器点击`New...`然后会启动Genymotion来安装。然后选择一个手机并点击`Start...`即可。但只能有一个模拟器处理`On`状态。\n\n\u003e 重要提示：必须从插件里打开安装模拟器，否则会用不了。\n\n### 8、测试安装###\n\nReactNative项目名称规范是首字母大写，执行npm命令并进入项目文件夹下。\n\n\t$ react-native init AwesomeProject\n\t$ cd AwesomeProject\n\t$ react-native run-android\n\n\u003e第一次执行此命令需要下载比较多的模块，请耐心等待。\n\u003e--daemon --parallel --offline\n\n执行之前把真机或者模拟器启用。有个常见的问题是在你运行`react-native run-android`命令后，Packager可能不会自动运行。此时你可以手动启动它，另开启一个npm命令窗口执行：\n\n\tcd AwesomeProject\n\treact-native start\n\n执行后可输入网址查看打包情况：http://localhost:8081/index.android.bundle?platform=android\n\n查看并debug界面：http://localhost:8081/debugger-ui\n\n在你已经成功运行了项目，我们可以开始尝试动手改一改了，按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是⌘+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。\n\n扩展阅读：[http://reactnative.cn/docs/0.39/getting-started.html](http://reactnative.cn/docs/0.39/getting-started.html)\n\n恭喜完成安装！\n-\n\n## 问题解决 ##\n\n**Q：** build成功后真机测试是红色，提示没有连接服务器js Server\n\n**A：** 最简单办法是执行cmd命令：\n\n\tadb reverse tcp:8081 tcp:8081\n\n\u003e或者我们摇一摇手机，点击Dev Settings后，点击Debug server host \u0026 port for device,设置IP和端口。这里的IP是电脑的IP，不知道的可以在命令行中输入ipconfig进行查询，端口号固定8081\n例如：192.168.1.103:8081\n\n**Q:** 运行react-native run-android时报错，报错信息中含有`Could not find tools.jar`等字样\n\n**A：** 请留意上面设置系统变量classpath，path和JAVA_HOME。\n\n**Q：** 出现`com.android.builder.testing.api.DeviceException: Timeout getting device list.`字样错误怎么办？\n\n**A：** 只要是模拟器问题，可先使用命令`adb devices`查看是否有可用的模拟器。如果没有请重新连接真机或者从`Android Studio`模拟器插件里，删除模拟器后重新安装一个（重新安装很快的）。\n\n**Q：** 出现`'adb' 不是内部或外部命令`字样错误怎么办？\n\n**A：** 设置系统变量`path`添加上`adb.exe`文件路径，比如`C:\\Users\\shine\\AppData\\Local\\Android\\sdk\\platform-tools`。\n\n**Q：** 出现`cannot bind to 127.0.0.1:5037`字样错误怎么办？\n\n**A：** 一般是5037端口被占用。想办法关闭进程。或者让相关程序不要随机启动。\n\n![设置sdk](img/16.png)\n\n比如360手机助力就无法杀进程。\n\n\n\n[参阅更多问题解决方法](http://bbs.reactnative.cn/topic/130/%E6%96%B0%E6%89%8B%E6%8F%90%E9%97%AE%E5%89%8D%E5%85%88%E6%9D%A5%E8%BF%99%E9%87%8C%E7%9C%8B%E7%9C%8B-react-native%E7%9A%84%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98)\n\n\n## Android安装包制作签名 ##\n\nAndroid SDK 1.6 最主要改变为模拟器或真机可用系统自动创建的调试签名证书(debug.keystore), 但可发布的安装程序必须要先创建自签名证书 包括密钥库 keystore 和私钥 key alias。\n\n- 1、生成一个签名密钥\n\n\t`keytool -genkey -v -keystore xxx-release-key.keystore -alias xxx-alias -keyalg RSA -keysize 2048 -validity 1000`\n\n其中`xxx-release-key.keystore`和`xxx-alias`根据自己需要修改。\n回车后回答以下问题：\n\n    Enter keystore password:            \u003c-- 设置keystore密码-必须至少6个字符\n    What is your first and last name?\n      [Unknown]:                        \u003c-- 输入你的名字\n    What is the name of your organizational unit?\n      [Unknown]:                        \u003c-- 组织单位, 可以忽略\n    What is the name of your organization?\n      [Unknown]:                        \u003c-- 组织, 可以忽略\n    What is the name of your City or Locality?\n      [Unknown]:                        \u003c-- 城市\n    What is the name of your State or Province?\n      [Unknown]:                        \u003c-- 省份\n    What is the two-letter country code for this unit?\n      [Unknown]: CN                     \u003c-- 国家\n    Is CN=ipod4g, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=CN correct?\n      [no]:  yes                        \u003c-- 输入 yes 确认\n\n    Generating 1,024 bit RSA key pair and self-signed certificate (SHA1withRSA) with a validity of 10,000 days\n        for: CN=ipod4g, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=CN\n    Enter key password for           \n        (RETURN if same as keystore password):    \u003c-- 设置key密码，如与keystore密码相同，回车\n    [Storing android-release-key.keystore]\n\nkeystore密码和key密码我们暂定`shine2017`。然后它会生成一个叫`xxx-release-key.keystore`的密钥库文件。\n\n- 2、下载bundle文件\n\n\u003e前提是需要curl.exe文件，如果没有去[curl网站](https://curl.haxx.se/download.html)上按视系统情况下载，并放到C:\\Windows\\System32下。测试是否安装命名：`curl -V`\n\n进入项目里的路径`/android\\app\\src\\main`，并在该目录下新建assets文件夹。\n\n然后使用npm命令进入项目目录执行命令：\n\n\tcurl -k \"http://localhost:8081/index.android.bundle\" \u003e android/app/src/main/assets/index.android.bundle\n\n- 3、添加gradle的android keystore配置\n\n在android/build.gradle文件的defaultConfig{}配置下添加：\n\n\tsigningConfigs {\n\t\trelease{\n\t\t\tstoreFile file(\"D://scscms/ReactNative/HelloText/android/xxx-release-key.keystore\")\n\t\t\tstorePassword \"shine2017\"\n\t\t\tkeyAlias \"xxx-alias\"\n\t\t\tkeyPassword \"shine2017\"\n\t\t}\n\t}\n\n\tbuildTypes {\n\t\trelease {\n\t\t\tminifyEnabled false\n\t\t\tproguardFiles getDefaultProguardFile('proguard-android.txt'),'proguard-rules.pro'\n\t\t\tsigningConfig signingConfigs.release   //引用签名配置（见上面）\n\t\t}\n\t}\n\n- 4、启用proguard代码混淆\n\n打开android/app/build.gradle文件配置:\n\t\n\tdef enableProguardInReleaseBuilds = true\n\n重要：启用Proguard之后，必须再次全面测试应用。\n\n- 5、执行gradle打包\n\n\u003e前提需要安装gradle工具(版本与android\\gradle\\wrapper\\gradle-wrapper.properties下的distributionUrl一致)，下载解压好后还需要设置环境变量，在path环境变量中添加`D:\\Program Files\\gradle-2.4\\bin`。最后可运行`gradle -v`检查是否安装成功。\n\n在/android/目录中执行命令:\n\n\t$ aradle assembleRelease\n\n打包后的文件在android/app/build/outputs/apk目录中，例如app-release.apk。如果打包遇到问题可以先执行`gradle clean`命令清理一下。\n最后向老板报告：任务完成，去各市场发布APP去吧！\n\n### Webstrom 代码智能提醒 （可选）###\n\nReactNative 代码智能提醒 （Webstrom live template）\n\n\tgit clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate\n\n**window下安装：**\n\n\u003e 选择菜单 file -\u003e import settings -\u003e ReactNative.jar\n\n**Mac下安装：**\n\n将ReactNative.xml复制到 ~/Library/Preferences/WebStorm11/templates 然后重启 WebStrom。\n\n\n### React学习 ###\n\n初学者难理解ReactNative的话，可先了解下[React](https://facebook.github.io/react/docs/installation.html)。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Freactnative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscscms%2Freactnative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Freactnative/lists"}