准备工作
1、安装node.js:https://nodejs.org/download/(node -v,npm -v 查看安装结果)
2、建议安装watchman,终端命令:brew install watchman
3、安装flow:brew install flow(非必须)
4、安装cocoapods
5、sudo npm install -g react-native-cli
正式环节
1、react-native init HelloWorld --version 0.55.4(创建一个壳工程,版本和ReactNative中文网最高版本同步,再高遇到问题资料跟不上)
2、创建自己的工程TestRN
3、cd TestRN,mkdir React
4、cd React,把Helloworld工程的index.ios.js、package.json拷贝过来(当然记得到的也可以手动创建package.json、index.ios.js)
5、在React文件目录下执行npm install
6、cd ../到工程目录执行pod init
7、vim Podfile
8、查看终端,rn服务是否已经启动,没有启动执行react-native start
9、ios9以上增加http的info.plist配置
10、如果发现执行异常,查看模块名字是否正确,app.js的入口是否正确,服务如果是之前的项目的,可以关闭之后重新起一个服务
备注
1、服务启动之后,发现卡在Loading dependency graph, done.,此时一定要检查host里面的配置,特别是装了switchhost这个软件的情况下
2、查看localHost,浏览器打开:http://localhost:8081(展示React Native packager is running.)
3、8081端口占用查看:lsof -n -i4TCP:8081
4、kill对应的占用:kill -9 <PID>
5、npm install,提示 `Unexpected end of JSON input while parsing near`,执行:npm cache clean --force
本地backup的Host配置:
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
Podfile文件内容:
# Uncomment the next line to define a global platform for your project
platform :ios, '8.0'
target 'TestRN' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# Pods for TestRN
pod 'ReactiveObjC'
pod 'SDWebImage'
pod 'AFNetworking'
pod 'React', :path => './React/node_modules/react-native', :subspecs => [
'Core',
'ART',
'DevSupport',
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
'BatchedBridge',#rn > 0.45 version need,it will be deprecated and removed in a future
# Add any other subspecs you want to use in your project
]
pod 'yoga', :path => './React/node_modules/react-native/ReactCommon/yoga'
end