经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » iOS » 查看文章
iOS 集成React Native超强实用入门笔记
来源:cnblogs  作者:肖品  时间:2020/11/9 15:59:50  对本文有异议
环境安装
 
1.homebrew安装, 官方:https://brew.sh/
  
  1. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

 如果官方的方式安装不了,参考:https://www.cnblogs.com/xiaopin/p/12941251.html

2.Node安装:
  1. brew install node

  

3.watchman安装:
  1. brew install watchman

  

4.Node工具源切换
  1. #淘宝
  2. npx nrm use taobao
  3. #或
  4. #官方源
  5. npx nrm use npm

  

5.yarn 安装,替换npm的工具,加速node模块的下载
  
  1. npm install -g yarn

 

6.安装xcode, 并在 Xcode > Preferences > Locations > Command Line Tools配置一个Xcode
 
创建RN项目
1.创建RN新项目,创建一个默认最新版本RN的项目,或者指定RN版本项目
  1. npx react-native init 项目名称

    #npx react-native init 项目名称 --version 0.63.3

  

2.编译运行
  1. cd AwesomeProject
  2. yarn ios
  3. #或者
  4. yarn react-native run-ios

  正常情况下启动模拟器可以正常运行

 
将RN继承到现有项目
用官方的教程方式步骤集成到现有项目有问题,无法正确的Pod install类库,也没人更新,一万个草泥马,整死人!抛弃官方教程,看我的:
 
1.构建RN目录结构,用默认方式创建将一个RN项目,把主要的几个文件和目录,复制到出来,如下:
  1. MyProject
  2. App.js
  3. app.json
  4. index.js
  5. ios
  6. package.json

 

2.修改app.json, 改成自己的项目名称

  1. {
  2. "name": "MyProject",
  3. "displayName": "MyProject"
  4. }

  

3.修改package.json, name改成自己的项目名称, 指定项目版本,指定引用的React-Native版本,参考复制过来的东西,但是用下面这个几个配置就可以了

  1. {
  2. "name": "MyProject",
  3. "version": "1.0.0",
  4. "private": true,
  5. "scripts": {
  6. "start": "yarn react-native start"
  7. },
  8. "dependencies": {
  9. "react-native": "^0.63.3"
  10. }
  11. }

  

3.如果用了git管理代码,把node_modules/目录记录到.gitignore忽略文件中
4.在ios目录下面,创建一个自己的iOS项目,可以用Swift,OC,目录下创建或者从其他项目中复制一个Podfile文件过来
5.Podfile配置 【重点问题】,PS: 一万个草泥马的根源
  1. source 'https://github.com/CocoaPods/Specs.git'
  2.  
  3. require_relative '../node_modules/react-native/scripts/react_native_pods'
  4. require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
  5. platform :ios ,'10.0'
  6. use_frameworks!
  7.  
  8. target 'MyProject' do
  9.  
  10. config = use_native_modules!
  11.  
  12. use_react_native!(:path => config["reactNativePath"])
  13. end
 
然后在命令行中:pod install一下,集成到现有项目就完成了
 

原文链接:http://www.cnblogs.com/xiaopin/p/13878967.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号