React-Native

cocoapods支持RN

2018-05-31  本文已影响0人  焱止殇

准备工作

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
上一篇下一篇

猜你喜欢

热点阅读