使用新的 React Native Reanimated 概念 现在我们已经探索了一些在React Native Reanimated v2中引入的新概念,我们将使用这些新概念在我们的应用程序中创建动画。 要使用React Native Reanimated库,我们首先需要安装这个库。运行下面的任一命令来安装这个包: // yarn yarn add react-native-reanimated // npm npm i r...
运行yarn add react-native-reanimated@next react-native-gesture-handler 在导入任何包之前,我已将import 'react-native-gesture-handler'添加到文件顶部的 App.tsx 文件中 您应该更新babel.config.js文件并将react-native-reanimated/plugin添加到插件 module.exports={presets:["module:metro-react-native-babel-prese...
然后意识到它应该在plugins中，而不是presets中。只需将'react-native-reanimated/plugin'移到插件中：
presets: ['module:metro-react-native-babel-preset'], plugins: [ 'react-native-reanimated/plugin', ], };
在React Native Reanimated v2 中,动画是一等公民。动画以 worklets 的形式用纯 JS 编写。 Worklets 是由 Reanimated Babel 插件从主 React Native 代码中选取的 JavaScript 代码片段。这些代码片段在一个单独的线程中运行,使用一个单独的 JavaScript 虚拟机上下文,并在 UI 线程上同步执行。
1.在'/babel.config.js'中的预设下添加plugins:['react-native-reanimated/plugin']<your_app_root_...
修改babel.config.js module.exports= {presets: ['module:metro-react-native-babel-preset'],plugins: [ ['@babel/plugin-proposal-decorators', {legacy:true}],// mbox// ['react-native-reanimated/plugin'],['babel-plugin-root-import', {paths: [ ...
Step 2: Add Reanimated's babel plugin Add react-native-reanimated/plugin plugin to your babel.config.js. module.exports = { presets: [ ... // don't add it here :) ], plugins: [ ... 'react-native-reanimated/plugin', ], };caution react-native-reanimated/plugin has to be ...
router存放我们的路由组件,这里由于不需要复杂的选项卡导航,我们直接使用堆栈导航即可;我们首先改造入口的App.js,加入NativeBase和导航的Provider容器: import {NativeBaseProvider} from 'native-base'; import {NavigationContainer} from '@react-navigation/native'; ...
然后添加依赖项"react-native-reanimated": "^3.5.4",然后我在babel.js.js中添加了插件 ...