RN入门:RN第一个demo

 

1.RN环境安装。

这个参考RN入门(一)的博客就好,网上资料也很多。

创建工程:

react native  环境搭配好后  

创建项目

1.react-native init TestProject 

cmd一大堆下载创建啊之类的,等ok就好

 

然后 可以试试在cmd里 cd 到  TestProject 目录下 

执行 npm install指令 加载rn资源

完成后执行react-native run-ios  指令

我遇到报错信息xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

 

解决方法:在 终端执行如下命令 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

注意:前提是你已经安装了xcode

~~!不解决这个问题的话  之后cocoaspod 在podfile文件   pod 'GLog'会报错(一脸懵逼~~!)

pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'  

 好了  解决上面问题 react-native run-ios  就可以正常跑起来了~~!当然什么locahost:8081什么的配置端口这些我没去研究 

也可以直接去iOS目录下 运行iOS工程  也能正常启动

 

2.创建好后,TestProject文件夹里有ios工程了  然后配置cocoaspod管理库

cocoaspod管理第三方库

在Podfile文件里 写入:

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

'Core',

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

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

'RCTText',

'RCTNetwork',

'RCTWebSocket', # 这个模块是用于调试功能的

'ART',

'RCTActionSheet',

'RCTGeolocation',

'RCTImage',

'RCTPushNotification',

'RCTSettings',

'RCTVibration',

'RCTLinkingIOS',

'DevSupport',

'BatchedBridge',

'RCTAnimation',

# 在这里继续添加你所需要的RN模块

]

pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

 

导入yoga 开发库   运行iOS工程会报错    Implicit conversion loses integer precision: 'size_type' (aka 'unsigned long 之类的问题   

解决:在podfile文件里加入第三方库警告忽略  # 忽略cocoapods里的警告

inhibit_all_warnings!

pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

 

然后可以正常运行iOS工程了  ~~!app运行后 就是一个welcome 的页面

 

3.打开webstorm 或者  vscode

一开始是用webstorm  ~~!点击了index.js后 发现有提示说 

closure linter 找不到文件之类的问题  ~~! 其实就是一些插件配置没有配合,身为rn新手,老实折腾了一番

 

总之我后来选择了vscode作为开发工具

也一样提示需要 eslint  插件资源

 

找了下资料 解决方案:

执行  npm i -g eslint

然后到 TestProject 目录下

eslint --init

这个自己动手试验了

实际上 eslint --init  按需加载就好  不是必须要执行

 

 

 

 

 

posted on 2018-01-25 11:10  yuzx  阅读(2261)  评论(0编辑  收藏  举报

导航