react-native 创建新的项目

最新推荐文章于 2024-10-05 17:21:20 发布

绒雨流

最新推荐文章于 2024-10-05 17:21:20 发布

阅读量5.8k

点赞数 2

分类专栏： react-native 文章标签： react native

本文链接：https://blog.csdn.net/rongyuliu951080er/article/details/110382685

版权

react-native 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

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" />
    <application
      android: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">
      <activity
        android: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打包文件！