Taro is an open cross-end cross-framework solution that supports the development of wechat, JD.com, Baidu, Alipay, Bytedance, QQ mini program, H5, React Native and other applications using React/Vue/Nerv and other frameworks.
Since the launch of Taro 3, many developers have expected it to support React Native. Based on the technology accumulated by 58 team in React Native direction, we entered into a strategic partnership with Taro team. Team 58 will lead the development of Taro 3 React Native and jointly promote the development of Taro.
Since Last December, we have completed support for Taro 3 React Native and released 9 Canary versions and 4 beta versions. After a long time of verification, we are finally welcoming the official version 3.2.
A, Highlights
1. Faster compilation
Prior to Taro 3, Taro was a compiled framework, and the React Native package bundle was split into two processes. First, a large number of AST operations were performed on Taro source code to convert it into React Native code, and then Metro was used to package it into bundles. The overall compilation speed needs to be further improved.
Taro 3 React Native has implemented a major change to the entire build system. Instead of generating intermediate code, it directly uses Metro to generate bundles and ADAPTS them to the Taro 3 standard at runtime, making the build process easier and faster. And bring us more benefits:
- Use Metro to package React Native, and use multi-level caching and hasteFS to make the packaging speed faster.
- It is more in line with the React Native ecosystem, making it easier for communities to connect based on Metro packaging optimization scheme;
2. source-mapsupport
In previous versions of Taro React Native, the Taro code was converted to React Native intermediate code and then packaged into bundles using Metro. This is not only slow to compile, but also uses intermediate code to pack into bundles. Source-map is not supported, and debugging is not intuitive.
Taro 3 has made major changes to the compilation system. Instead of generating intermediate code, Taro 3 uses Metro to package the source code directly. This will not only improve the compilation speed, but also naturally support source-Map, which is a huge improvement to the development experience. Achieve an experience consistent with developing the React Native app.
React Native support, embrace the latest version 0.64
In the past, Taro supports mobile terminals. React Native versions are relatively fixed, and it is inconvenient to modify React Native versions.
Taro 3 is a complete architecture update. React Native is currently available in versions 0.60 and above, and is fully supported in the latest version 0.64, depending on dependencies in developer projects.
In React Native 0.64, the Hermes engine is supported on iOS, with inline references enabled by default, React 17, etc. Developers who want to experience these new features need to update their dependencies.
New project upgrade
The Taro template relies on TypeScript 4 and React 17 by default. Run the React Native app and install TypeScript 0.64.
Upgrading of old projects
Those who are upgrading from v2.x should follow the migration guide first.
If Taro 3 is an old project, manually upgrade the corresponding dependencies:
React: ^ 17.0.0The react - dom: ^ 17.0.0Typescript: ^ 4.1.0@ typescript eslint/parser: ^ 4.15.1@ typescript - eslint/eslint - plugin: ^ 4.15.1The react - native: ^ 0.64.0
Setting the ESLint configuration:
// .eslintrc
module.exports = {
"extends": ["taro/react"]."rules": {
"react/jsx-uses-react": "off"."react/react-in-jsx-scope": "off"}}Copy the code4. Richer apis and components
Before Taro 3.2, React Native has implemented many common apis and components. However, there is still a big gap between React Native and H5, which needs further improvement. In the new release, we further increased the coverage of components and apis, adding 45 new apis and 8 new components.
Taro 3, we have integrated all related components and apis, including video, audio and so on. In addition to multimedia related components, there are also scanning, VirtualList and so on, which greatly enrichis the API and components. Please refer to the documentation for more information.
The new API:
| API | function |
|---|---|
| scanCode | scan the code |
| show/hideTabBar… | TabBar related |
| createCameraContext | Camera related |
| . | . |
New components
| API | function |
|---|---|
| Video | video |
| Camera | The camera |
| VirtualList | A long list of |
| . | . |
5. Introduce apis and components on demand
In React Native application, the size of the final bundle after packaging will affect the time when we open the page for the first time. If the time is too long, the user experience will be affected to some extent.
In Taro 3, we also optimized the size of the packaged bundles. In a real business scenario, not all of the components and apis provided by Taro might be used, but all of the components and apis and related dependencies would still be packaged into the final bundle, which would undoubtedly increase the size of the bundle.
To reduce the size of the package, we implemented an on-demand approach to components and apis, such as:
import Taro from '@tarojs/taro'
Taro.scanCode(options)
// The import of the actual packaging will be based on the import of the page usage= >import { scanCode } from '@tarojs/taro-rn/dist/lib/scanCode'
Copy the codeTherefore, this implementation is introduced on demand. Unused components and apis in the project and dependent libraries are not packaged into the bundle, which greatly reduces the size of the final bundle and further improves the time for the App to open the page for the first time. At the same time, due to the existence of on-demand introduction, shell engineering can be independently optimized and customized to reduce the size of APP package.
6. Integrate with React Native apps
Some developers mentioned that the existing React Native project, without modifying the original service, is it easy to access?
In Taro 3, we answered the question in the affirmative. The entire compilation system of Taro 3 has been upgraded to be packaged directly based on Taro source code, and customized Transformer with runtime adaptation to generate Taro-enabled Metro configurations and incorporate them with business configurations. Bundles are packaged according to the final Metro configuration. This scheme is relatively easy to expand.
By providing a packaged Metro configuration with support for Taro and a runtime approach, developers can simply combine their existing business packaging configuration with a runtime approach for packaging processing. In this way, it is more convenient to combine with the existing navigation system without modifying the original code, which can be easily accessed. Please refer to Demo for details.
//metro.config.js for reference
const Supporter = require('@tarojs/rn-supporter')
const supporter = new Supporter()
const taroMetroConfig = supporter.getMetroConfig()
const busConfig = {
resetCache:true,}module.exports = mergeConfig(busConfig,taroMetroConfig)
Copy the code7. Do not use across ends
Without cross-end requirements, is there no need to use Taro?
Taro is still recommended for developers who only need to develop React Native applications or applets without cross-terminal requirements for the following reasons:
- Support fast to other end, facilitate later expansion;
- Taro components and apis can be used to speed up development.
- React Native is easier to write than React Native and supports multiple precompiled languages.
2. Upgrade Guide
Those who are upgrading from v2.x should follow the migration guide first.
To upgrade from v3.x, you need to install the CLI tool of V3.2:
npm i -g @tarojs/cli
Copy the codeThen go to the project and delete node_modules, yarn.lock, package-lock.json.
Finally, change the Taro dependencies in package.json file to ^3.2.0, and then reinstall the dependencies.
Taro 3 currently only supports React development projects running on React Native.
Iii. Future planning
Taro 3 has completed the adaptation of React Native. In the future, we will continue to improve the coverage of components and apis, usage cost and other aspects. Continuously improve the coverage of API and components, as far as possible to reduce the difference with H5, small program. Continuously reduce the cost of use by adding tutorials, reducing project initialization steps, providing more cases, and so on.
Taro also provides wechat groups to facilitate more timely communication with defenders: (wechat group number:)
Four, thank you
The Taro team would like to extend our heartfelt thanks to all the friends who have participated in the construction of the open source project, whether they have submitted code for Taro, built the surrounding ecology, provided feedback, or even just discussed and joked with us over dinner.
We sincerely invite you to communicate with the Taro team about your usage and hope you can put forward more valuable suggestions. With your company, Taro will be more wonderful.
Finally, in no particular order, special thanks to all students who contributed code to Taro’s journey from V3.1 to V3.2:
- @KeenV
- @baranwang
- @LiHDong
- @changcllong
- @liuchuzhang
- @baranwang
- @SyMind
- @ryougifujino
- @inarol
- @huaoguo
- @zhiqingchen
- @zhenglong
- @Qiuz
- @shinken008
- @skychx
- @iambool
- @iChengbo
- @nickyefei
- @xzj
- @yechunxi
- @Victor
- @xieweilyg
- @Dugz
- @haojie
- @b2nil
- @doublethinkio
- @CodeDaraW
Author’s brief introduction
- Chen Zhiqing: 58.com front-end architect, member of technical committee
- Chunxi Ye: Senior front-end development engineer of 58.com