reactnative环境搭建?

发布网友 发布时间：2024-09-07 00:16

我来回答

共1个回答

热心网友 时间：2024-10-14 11:36

1、VSCode安装ReactNativeTools插件。

2、生成package.json，用盯慎npminit命令

tsconfig.json，typescript的项目都需要一个tsconfig.json

输入命令tsc--init会创建一凯旁敬个这样启段内容的tsconfig.json

react-native配置启动图支持ios和android

当前环境

OS:macOSHighSierra10.13.5

Node:8.11.3

Yarn:1.7.0

npm:5.6.0

Watchman:4.9.0

Xcode:Xcode9.4.1

react:16.3.1=16.3.1

react-native:0.55.4=0.55.4

react-native-splash-screen:3.1.0=3.1.0

1：用Xcode打开项目,找到Libraries目录，右键选择AddFilesto[yourproject'sname]

2：在{project}/node_modules/react-native-splash-screen/ios找到SplashScreen.xcodeproj文件，并添加

3：在XCode中，选择你的项目，选择bilidPhases并将SplashScreen.xcodeproj/Products/libSplashScreen.a文件添加到LinkBinaryWithLibraries中,拖过去即可

4：添加搜索路径：在项目→BuildSettings→SearchPaths→HeaderSearchPaths处添加一项为$(SRCROOT)/../node_modules/react-native-splash-screen/ios

1：在项目目录{prject}/茄基乱android/下找到settings.gradle文件添加一下内容

2：在项目目录{prject}/android/app/下找到build.gradle文件添加compileproject(':react-native-splash-screen')

3：找到项目目录{project}/android/app/src/main/java/com/app/下MainApplication.java文件，引入importorg.devio.rn.splashscreen.SplashScreenReactPackage;并添加newSplashScreenReactPackage()

1:找到项目目录{project}/ios/{project}/下AppDelegate.m文件，引入#import"SplashScreen.h"添加内容如下

2:在XCode中,点击App/Images.xcassrts通过LaunchImage添加启动图片

3:在XCode中，选择你的项目，选择General找到AppIconsandLaunchImages下的LaunchImagesSourc选择你设置好的LaunchImage

4:如出现错误#unknownreceiver'SplashScreen';didyoumean'RNSplashScreen',则改动源码以及AppDelegate.m文件如下：

????????4.1.源码改动:找到{project}/node_modules/react-native-splash-screen/ios文颤档件夹下的RNSplashScreen.m文件，将其[SplashScreenshow];修改为[RNSplashScreenshow];,如锋袜下图

?4.2:AppDelegate.m文件改动:找到项目目录{project}/ios/{project}/下AppDelegate.m文件，将所有SplashScreen改为RNSplashScreen即可，如下图

4.3:重启尝试是否有其他问题，修改源码地址可查看我的github项目地址，更多问题请查看官方issues

1:在项目目录{prject}/android/app/src/main/res/下创建layout文件夹

在layout文件夹下创建launch_screen.xml添加一下内容

2:将你的启动图改名为launch_screen.png并添加到{prject}/android/app/src/main/res/文件夹下相应的drawable文件夹中（根据需求配置相应大小的文件夹）

1.drawable-ldpi

2.drawable-mdpi

3.drawable-hdpi

4.drawable-xhdpi

5.drawable-xxhdpi

6.drawable-xxxhdpi

3：在{prject}/android/app/src/main/res/values/文件夹下修改名为添加一个名为primary_dark的属性并设置其颜，添加内容如下

4：如果您希望启动屏幕透明，打开{prject}/android/app/src/main/res/values/styles.xml并添加itemname="android:windowIsTranslucent"trueitem到文件中

首先引入进行模块importSplashScreenfrom'react-native-splash-screen'

使用SplashScreen.hide()方法将其关闭

1、首先安装了nodejs4.1版本2、然后安装了npminstall-greact-native-cli模块3、安隐哪装androidsdk并且配置android环境变量4、安装gradle环境5、进入这个博清羡客里边有react-nativeforandroid项目，下载下来，然后执行灶正码npminst...

一.搭建RN环境：ReactNative中文网（）

命令：

1.brewinstallnode（安装node）

遇到问题1：找不到Xcode路径（xcrun:error:activedeveloperpath("/Users/apple/Desktop/Xcode.app/Contents/Developer")doesnotexist）

解决方案1：更改xcode默认路径：sudoxcode-select--switch（手动拖拽丛物迹Xcode路径）

2.brewinstallwatchman（渗并安装watchman）

遇到问题1：蚂猜watchman版本不支持最新版本的mac系统10.12

3.建立npm镜像

npmconfigsetregistry--global

npmconfigsetdisturl--global

4.npminstall-gyarnreact-native-cli

Yarn、ReactNative的命令行工具（react-native-cli）

遇到问题：

librarynotfoundfor-lstdc++.6.0.9

error:linkercommandfailedwithexitcode1(use-vtoseeinvocation)

解决方法：xcode10中添加libstdc++.6.0.9.tbd和libstdc++.6.tbd（从xcode9中获取）

两个路径都要添加：

真机路径：

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/usr/lib/

模拟器路径：

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/usr/lib/

最为一个iOS开发人员，最近在研究rn开发，坑还挺多的。下面我就来说说iOS接入rn的步骤以及我遇到的问题.

前提：电脑已经安装过React-Native相关环境;

创建：首先我们创建一个iOS项目，我命名为React-IOS；

?这个相信大家都会创建，就不说了。

platform:ios,‘9.0’

target'React-IOS'do

?pod'yoga',:path='./reactnative/node_modules/react-native/ReactCommon/yoga'

?pod'React',:path='./reactnative/node_modules/react-native',:subspecs=[

??'Core',

??'RCTImage',

??'RCTNetwork',

??'RCTText',

??'RCTWebSocket',

??'CxxBridge',#如果RN版本=0.45则加入此行

??'DevSupport',#如果RN版本=0.43，则需要加入此行才能开启开发者菜单

??#'BatchedBridge',

???#添加你的项目中需要的其他三方库

?]

?#如果RN版本=0.45则加入下面三个第三顷袭悔方编译依赖

?pod'DoubleConversion',:podspec=雀正'./reactnative/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'

?pod'glog',:podspec='./reactnative/node_modules/react-native/third-party-podspecs/glog.podspec'

?pod'Folly',:podspec='./reactnative/node_modules/react-native/third-party-podspecs/Folly.podspec'

end

我们只需要把红色换成自己第四步创建的那个文件夹的名字

NSURL*jsCodeLocation=[NSURL

???????????????URLWithString:@""];

??RCTRootView*rootView=

??[[RCTRootViewalloc]initWithBundleURL:jsCodeLocation

?????????????moduleName????:@"ReactIOS"

?????????????initialProperties:

???@{

????@"scores":@[

????????@{

??????????@"name":@"Alex",

?????????禅漏?@"value":@"42"

??????????},

????????@{

??????????@"name":@"Joel",

??????????@"value":@"10"

??????????}

????????]

????}

?????????????launchOptions??:nil];

??self.view=rootView;

说说我遇到的问题吧，首先我在第五步遇到的问题?

当时红色部分没有加，一直报错，找了好几天才看到别人有一篇文章是说的这个问题，要把红色部分加上。上面问题解决后我又遇到一个问题，错误在第三步和第七步，

这三个红色地方不对应,导致不错

解决办法就是把-去掉就好了。

希望能帮到大家!!!!!!

项目地址:,先cd到reactnative下npminstall,在cd到项目目录下podinstall现在依赖

Mac环境下RN的安装之路：

前言：之前安装了Flutter环境，准备Flutter之路。。现在又准备安装一下Reactnative环境配置...Mac终端源为~zsh

RN中文网--()里面看一下Mac的环境安装步骤

一、安装node

然后尝试着运行下node-v看看是否安装成功，并没有安装成功。

运行了一下brew-v查看了一下版本，是一两个月前的版本号，抱着试试的态度，brewupdate升级一下版本号。

现在版本号为

然后再次运行brewinstallnode,等待一会安装完毕哗桥，没有再报错Error信息。

node-v查看一下node的版本信息

二、安装Watchman（Watchman--()则是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

(因为笔者是iOS开发，所以Xcode和Simulator都已经安装过了)

三、安装ReactNative的命令行工具（react-native-cli）运芦带

终端运行rect-naticeinitMyApp创建一个项目名为MyApp的项目，这一步第一次运行初始化需要一段时间，稍微等一下,这里初始化后的目录直接是用户下目录了。我们可以cd到桌面你自己创建的某个目录，然后执行这段init命令

这里项目就初始化好了。

然后cd到你的MyApp目录下，npmrunios（官网教程用yarn替代的npm命令，我这边安装速度还好，就没有替换）

这里出现了一堆报错信息,看到有个error是，项目中有Podfile，但是没有运行podinstall，这里我们cd到项目中ios目录下，运行podinstall试试。

然后等待pod安装完毕，这里等会可以直接用xcode启动APP尝试一下。

443error了若干次、、经过一个多小时蛮长等待......

出现这个界面。下面就通过XcodeMyApp.xcworkspace点击运行尝试一下

编译过程又几分钟、有种巨型组件项目既视感，千呼万唤始出来！！

然后我们在尝试一下刚刚无法完成的命令启动，cd到项目目录

react-nativerun-ios

虽然警告很多、虽然旁芦模拟器启动的是iPhone11.但总归成功启动官方默认项目了

以下就是reactnative环境安装及官方示例项目启动过程了。下一篇会记录一下，在现有原生项目添加reactnative组件。

附:

vscode打开的话,App.js还是有几个报错。这个目前还不知道原因

百度了一下，看有人说在setting.json加入这句话"javascript.validate.enable":false即可，貌似加入后也不报错了。