react-native 创建新的项目

一、安装node

1、首先进入node官网,查看下载你所需要对应安装的node版本
node中文网下载链接:node中文网链接
2、打开开始菜单,输入cmd,打开cmd
(windows系统直接用win+r快捷键可以快速打开cmd)
node -v 查看node版本号,可以知道是否安装node成功
npm -v 查看npm版本号,可以知道安装的npm版本
如下图所示:

二、创建react-native项目

1、react-native init 项目名称(–version 0.59.9)
可以指定react-native版本创建项目,如果未指定项目版本,应该使用的是react-native最新版,可以按照自己的需求看是否需要创建指定版本的rn项目

2、创建成功后,就会在文件夹下看到自己创建的项目,因为我创建的时候未指定react-native版本,所以成功后,react-native版本为0.63.3,是react-native最新版

三、运行项目(运行前先确定有可连接的设备)

1、打开项目文件夹 cd rnTestApp
2、运行安装到手机 react-native run-android
3、运行实时启动项目 react-native start
4、执行打包命令,生成apk安装包(windows系统):
(1)打包前需要在项目目录rnTestApp\android\app\src\main目录下新建assets文件夹,为生成index.android.bundle文件提供文件目录
(2)react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
(4)cd android
(5)gradlew assembleRelease 或者 ./gradlew installRelease
(6)可以在项目文件目录下查看到打包生成的app-release.apk文件
rnTestApp\android\app\build\outputs\apk\release
至此项目创建完成
安装到手机后,会在手机上安装上项目应用,如下图所示:

四、连接android设备

1、首先可以在cmd窗口运行adb devices,查看有没有连接的手机
2、连接成功后如下图所示

夜神模拟器链接:
1、adb connect 127.0.0.1:62001
2、adb devices
3、netstat -ano | findstr 5912(NoxUMHandle.exe对应的PID)
4、找到127.0.0.1:62xxx的地址,这里有:127.0.0.1:62026
运行命令:adb connect 127.0.0.1:62026,即可连接成功

真机运行:
1、使用数据线连接手机
2、手机需要打开开发者模式
3、adb devices 查看连接手机列表

adb解决连不到手机方法
1.打开手机USB调试
2.adb kill-server
3.adb start-server
4.adb devices

五、react-native start 报错,连接不上手机

react-native could not contect to development server 的原因
1、8081端口被占用了或者什么原因不能使用,关闭被占用的端口进程,或者给模拟器服务设置其他端口:
(1)关闭占用端口的进程重新跑;
(2)设置服务到其他端口重新跑;
(3)你不会解决,重启电脑运行问题解决
解决办法:
1.确保包服务器在运行
2.确保你的设备或者模拟器连接着电脑,并且手机打开了USB调试模式,然后在cmd中运行adb devices来查看已经连接好的设备列表
3.确保飞行模式是关闭的
4.关键一步:如果是使用真机来开发,输入 adb reverse tcp:8081 tcp:8081来检查设备
5.输入IP:8081(这个大家都会)

六、修改APP应用名字

打开项目文件目录rnTestApp\android\app\src\main\res\values下的strings.xml文件,修改为自己需要的APP名字

<resources><string name="app_name">修改为自己的APP名字</string>
</resources>

七、修改APP应用图标

打开项目文件目录rnTestApp\android\app\src\main\res,修改
mipmap-hdpi、mipmap-mdpi、mipmap-xhdpi、mipmap-xxhdpi、mipmap-xxxhdpi文件夹下图标,将图标换为自己APP应用的图标
项目目录rnTestApp\android\app\src\main下的AndroidManifest.xml为APP应用配置文件:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"package="com.rntestapp"><uses-permission android:name="android.permission.INTERNET" /><applicationandroid:name=".MainApplication"android:label="@string/app_name"  //这个是APP名字,这个是注释,方便自己看,实际应用要去掉这些,否则会报错android:icon="@mipmap/ic_launcher"  //这个是方形图标名称android:roundIcon="@mipmap/ic_launcher_round"  //这个是圆形图标名称android:allowBackup="false"android:theme="@style/AppTheme"><activityandroid:name=".MainActivity"android:label="@string/app_name"android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"android:launchMode="singleTask"android:windowSoftInputMode="adjustResize"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter></activity><activity android:name="com.facebook.react.devsupport.DevSettingsActivity" /></application>
</manifest>

八、创建完项目之后,第一次打包会报错

1、报错错误:Task :app:mergeReleaseResources FAILED
可能报错原因:资源重复导致出错

解决办法:
删除rnTestApp\android\app\src\main\res\raw 目录下的app.jspn文件
删除rnTestApp\android\app\src\main\res目录下的drawable-mdpi 文件夹
这样就可以打包成功
会在项目目录rnTestApp\android\app\build\outputs\apk\release目录下找到app-release.apk打包文件!

react-native 创建新的项目相关推荐

  1. 如何用 React Native 创建一个iOS APP?(二)

    我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...

  2. [react] create-react-app创建新运用怎么解决卡的问题?

    [react] create-react-app创建新运用怎么解决卡的问题? (这个问题应该描述的是使用cra脚手架创建项目慢的问题) 这是因为cra默认使用的国外的npm源,替换为国内的npm源即, ...

  3. Linux下SVN创建新的项目

    Linux下SVN创建新的项目 Linux环境下的SVN创建新的项目 一.前置条件: 1)有安装了linux系统的服务器,123.*.*.29 2)服务器上安装了svn,本人服务器的svn的数据安装的 ...

  4. react:创建新项目

    React中文官方文档给出创建新应用的最佳方式(命令行). npx create-react-app my-app cd my-app npm start 终端直接报错,提示如下: bogon:~ j ...

  5. 初步了解React Native的新组件库firstBorn

    first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...

  6. 使用React Native创建乘车预订应用程序

    在本教程中,我们将使用React Native和Pusher创建一个乘车预订应用程序. 我们将创建的应用程序将类似于流行的乘车预订应用程序,例如Uber,Lyft或Grab. React Native ...

  7. 这是我最喜欢的使用React Native创建生产级应用程序的技巧

    Trust me when I say this, React Native is hard. And it's not the usual hard of what we think hard is ...

  8. django创建新的项目、App与基本配置

    实现安装django,使用pip安装即可:pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ django 创建新项目 创建一个名称为ne ...

  9. 在git 服务器挂载、创建新的项目、克隆新的项目

    流程,服务器创建项目名-->客户端克隆-->客户端提交并且推送-->完成 详细步骤 1.在git服务器路径文件夹下创建空文件夹,名字为新的项目名,如在  F:\git    下创建一 ...

  10. Android Studio打开React Native创建的项目

    1.点击 Import project 2.找到项目下android文件夹,选择build.gradle文件,open 转载于:https://www.cnblogs.com/lcyuhe/p/843 ...

最新文章

  1. JDBC--代码实现增删改查、及SQL注入问题解决
  2. Vxworks信号量分析
  3. VisualStudio2017下载与安装教程详解
  4. BZOJ-1923-外星千足虫-SDOI2010
  5. Day18 (一)类的加载器
  6. python人脸识别代码百度ai_python百度AI人脸识别API测试
  7. ruby hash方法_Ruby中带有示例的Hash.keys方法
  8. 第五人格维修服务器时间,第五人格调整维护时间 第五人格新赛季奖励皮肤一览...
  9. app 后台_uni星茫UI V3.0更新uni-app多端小程序源码丸子插件wordpress后台
  10. 面试:一文搞懂Java集合
  11. ACM常用数列(斐波那契数列、卡特兰数、贝尔数、斯特灵数)
  12. 适配器模式之观察者模式
  13. 使用dea-toolbox进行数据包络分析
  14. 电脑4g内存C语言CAD够用吗,电脑4g内存够用吗-电脑4g内存是否够用详情介绍 - 系统家园...
  15. 详述支付网关的设计原则
  16. ViewData与ViewBag的区别与联系
  17. JSON解决乱码问题
  18. 腾讯地图api-基本用法总结
  19. 美团C++软件开发笔试题
  20. 支付宝高可用系统架构-胡喜

热门文章

  1. Word 插入参考文献 通过尾注插入并更改尾注罗马数字为阿拉伯数字
  2. matlab的fprintf写不进文件,fprintf写不进文件
  3. Windows系统运行VirtualBox一直出现0x00000000指令引用的0x00000000内存该内存不能为written
  4. 本地文件上传到github
  5. excel取消隐藏_猴哥讲述:对excel工作表进行隐藏和取消隐藏的操作行为
  6. githut管理vs2012代码
  7. 抖音账号盘子起底:摄影类账号是怎么割韭菜?
  8. python大作业设计报告_python大作业.doc
  9. android逆向笔记 -- 记一次解决飞天助手未知模拟器方法
  10. android google 地图路线图,Android中如何调用google地图生成路线图