taro转rn-ios（个人记录，第一次搞，有误请指正：)）

使用的多端框架taro，目的是开发一个ios应用，刚开始打算使用taro-ui，但是集成后发现taro-ui不支持rn，所以继而转向ant design mobile rn。
在集成ant design过程中也遇到很多问题，但是错误的提示都很明显，缺少什么装什么，然后yarn，npm run dev:rn重新编译就ok

1. 首先说一下运行流程，使用 taro init xxx装载好项目
2. 然后yarn装依赖
3. 然后编译项目npm run dev:rn。看到如下图代表成功
4. 然后按照官网的步骤装开发环境 https://reactnative.cn/docs/environment-setup#%E5%BC%80%E5%8F%91%E5%B9%B3%E5%8F%B0

4.然后打开网页http://127.0.0.1:8081/index.bundle?platform=ios&dev=true 会触发对应终端平台的 js bundle 构建。
5.把应用放到空壳项目 (相关文章：https://github.com/NervJS/taro-native-shell/tree/0.63.2#readme)
6.git clone https://github.com/NervJS/taro-native-shell.git
7.cd taro-native-shell
8.yarn || npm install
工程目录如下：
➜ taro-native-shell git:(master) ✗ tree -L 1
.
├── LICENSE
├── README.md
├── android // Android 工程目录
├── ios // iOS 工程目录
├── node_modules
├── package.json
└── yarn.lock
9. cd ios
10. pod install
11. yarn ios
iOS 模拟器会自行启动，并访问 8081 端口获取 js bundle，至此就成功了

在使用ant design组件中，使用Icon会提示缺少字体文件
Unrecognized font family ‘antoutline’

这个时候需要去项目的node_modules下@ant-design下面的icons-react-native下面的fonts下面的antfill.ttf、antoutline.ttf找到这俩个文件复制出来。然后打开xcode，
添加这俩行，然后pod install、yarn ios妥了

• 项目中用到了ant design mobile和第三方集成库dva，有一个问题需要注意。ant design提供了国际化的标签 import { Provider } from ‘@ant-design/react-native’ 但是同时redux也提供了相同的 import { Provider } from ‘react-redux’。总而言之，在app.js中也就是主页面需要将页面元素用俩个标签包裹起来，所以这里需要进行一下封装。
• 新建untils/antRnProvider.js文件

// 因为redux的Provider和ant design的Provider冲突，从而封装一层达到效果 同时以后调用与Provider相关的组件，不用在页面内包裹<Provider></Provider>
import { Provider } from '@ant-design/react-native'

const rnProvider = (props) => {
  return <Provider>{props.children}</Provider>
}

export default rnProvider

• app.js进行引入

import AntRnProvider from './utils/antRnProvider'
import { Provider } from 'react-redux'

class App extends Component {

  componentDidMount () {}

  // this.props.children 是将要会渲染的页面
  render () {
    return (
      <Provider store={store}>
        <AntRnProvider>
          {this.props.children}
        </AntRnProvider>
      </Provider>
    )
  }
}

export default App

1. 在请求API的时候，接口为http的需要进行配置. 更改Allow Arbitrary Loads为YES
   

---

真机构建（感谢无星老哥）

首先自己配置好签名，账号的申请还有各种证书的申请，其次开始进行build

俩种方法

1. 按照taro官网走（https://taro-docs.jd.com/taro/docs/react-native#%E6%9E%84%E5%BB%BA%E7%8B%AC%E7%AB%8B-app）

1. 配置 output
2. taro build --type rn --platform ios
3. ...

2. 开始build
   1.打开空壳项目中iOS文件夹，新建一个名为bundle的文件夹
   
   2.打开终端，cd到项目根目录，输入命令

 react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.jsbundle --platform ios --assets-dest ./ios/bundle --dev false 
 这个好像存在点问题，生成的index.jsbundle文件好像不全，建议使用上面命令生成的main.jsbundle，改名为index.jsbundle

  3.此时bundle目录里面会有一个 assets文件夹和index.jsbundle 俩个文件
  4.把文件拖到xcode内，最后是这个吊样子啊

![在这里插入图片描述](https://img-blog.csdnimg.cn/69e7de1053c845f0b6313ce41d4a6247.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aOu5aOr6Zi_,size_20,color_FFFFFF,t_70,g_se,x_16

  5.这时候打开appdelegate.m，修改release的路径

return [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.jsbundle" ofType:nil]];

 6.开始打包，xcode-Product-Archive，根据自己的需要选择-export

附几张xcode配置的相关东西，ps:自己觉得重要的

最后将app发布到app store connect，第一次会很慢，网上有的人说短则3个小时，长则一天…这里推荐一个方法

step1: 打开终端输入
open ~/Library/Caches/com.apple.amp.itmstransporter/

step2: 删除文件夹内所有文件

step3: 在终端输入 （亲测在这里打开VPN会快很多，下载内容大概60M+）
/Applications/Xcode.app/Contents/SharedFrameworks/ContentDeliveryServices.framework/Versions/A/itms/bin/iTMSTransporter

step4: 下载完了之后重启Xcode

// 如果在Xcode使用了shift+command+k清除缓存后，需要重新运行step1-step4

step3执行可能会有点慢，耐心等待即可。成功后，退出上传，重新上传即可。