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 按需加载就好 不是必须要执行