/Taro-Code-In-React-Native

Taro React Native 参考样例。支持在 React Native 初始化的项目中引入 Taro 3 代码。

Primary LanguageJavaScriptMIT LicenseMIT

Taro-Code-In-React-Native

Taro3 与 原生 React Native 应用结合的 Demo

该方案仅供参考，不再更新，建议使用 https://github.com/wuba/taro-playground

基本介绍

为了支持在 React Native 项目中引入 Taro3 代码，Taro提供了一种两者结合方案.

基本思路: 支持导出 Taro 默认的 Metro 配置，提供支持Taro写法的运行时方法，包含编译配置，页面配置函数等相关内容，实现在 React Native项目中用 Taro3 的代码。

新增包@tarojs/taro-rn-supporter, 该包的主要功能：

  1. 支持样式处理方案.
  2. 支持Taro编译配置.
  3. 支持Taro运行时配置.
  4. 支持Taro跨平台开发方案.
  5. 导出供metro.config.js使用的类.

与@tarojs/rn-runner的区别

  1. 去除 bundler server
  2. 去除入口文件处理
  3. 不处理导航
  4. 需自行集成到原RN项目中

业务需要处理

  1. 导航相关，自行处理路由
  2. 对 Taro 页面需要使用 @tarojs/runtime-rn 提供的 createPageConfig 进行包装.

快速开始

  1. 安装 Taro 对应相关包，参考 Demo 的 package.json
  2. Metro 配置，可参考 Demo 与自己业务的合并
  3. Babel配置 , 需按照 Taro 写法，依赖 babel-preset-taro
  4. 增加 Taro 项目的 config 编译配置，与 Taro 项目写法一致
  5. 配置路由，支持配置，页面函数等需要createPageConfig方法包装，参考 Demo

注意事项：

  • 导航相关不再处理，因此路由，导航栏, Tabbar相关API不可用
  • 页面需要配置，页面函数，比如onPageScroll等，需要用@tarojs/runtime-rn里的方法 createPageConfig包装，参考如下：
import { createPageConfig } from '@tarojs/runtime-rn'
import PagesTaroPageApi from './src/pages/taroPage/api'
import PagesTaroPageApiConfig from './src/pages/taroPage/api.config'

<Stack.Screen
    name="PagesTaroPageApi"
    component={createPageConfig(PagesTaroPageApi, { pagePath: '/pages/taroPage/api',...PagesTaroPageApiConfig})} />
  • 原生依赖安装，因为 部分Taro 组件和 API 依赖原生，如果引用了需要原生组件或 API 的部分,需集成 react-native-unimodules并安装依赖，目前依赖原生部分组件和API是按需加载的，可根据需要来安装，当前 Demo 已经包含了所有 Taro 组件和 API 的依赖，推荐安装 Demo 中的所有依赖

集成react-native-unimodules，请参考 react-native-unimodules Readme。

  • pxTransform 该方法，目前默认是 designWidth 是750，如果要设置其他的尺寸，需将全局配置挂载到global中
global.__taroAppConfig.appConfig = {
   designWidth: 750,
   deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2
  }, 
}
  • 目前 Taro的Picker组件是封装的ant-design，因此，如果使用 Picker，需要在根节点注入and-design 的 Provider
    return <AntProvider>
      <NavigationContainer>
      .....
      </NavigationContainer>
    </AntProvider>
  • 如果React Native应用使用的导航是react-native-navigation, 那么页面组件compoentDidShow/Hide, Current对象等将不可用