React Native Material使用FAB触发动画错误的技术求助

问题描述 #

开发收件箱页面时，引入@react-native-material/core库的Floating Action Button（FAB）组件后，触发以下错误：

Error: Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation with useNativeDriver: true, js engine: hermes

确认错误仅在添加FAB后出现。

组件代码 #

import { Avatar, Box, FAB, Icon, Stack, Text } from "@react-native-material/core";
import { useState } from "react";
import { Modal } from "react-native";
import React from 'react';

const Inbox = ({ navigation }) => {
    const [modalOpen, setModalOpen] = useState(false)

    const handlePress = () => {
        setModalOpen(!modalOpen)
    }

    return (
        <>
            <Modal visible={modalOpen} animationType="slide">
                <Text>Compose Mail</Text>
                <Stack fill justify="start" items="center" mt={20}>
                    <FAB icon={props => <Icon name="close" {...props} />} color="primary" onPress={handlePress} />
                </Stack>
            </Modal>

            <Stack fill justify="start" items="center" mt={20}>
                <FAB icon={props => <Icon name="plus" {...props} />} color="primary" onPress={handlePress} />
            </Stack>
        </>
    );
}

package.json #

{
  "name": "my-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-material/core": "^1.3.7",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "native-base": "^3.4.28",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-reanimated": "~2.14.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

解决方案 #

1. 升级@react-native-material/core版本 #

当前使用的1.3.7版本可能存在动画驱动不一致的bug，升级到最新稳定版大概率能解决问题：

npm install @react-native-material/core@latest
# 或使用yarn
yarn add @react-native-material/core@latest

2. 禁用FAB的动画（临时修复） #

如果升级后问题仍存在，可以先禁用FAB的动画效果，避免驱动冲突：

<FAB 
  icon={props => <Icon name="plus" {...props} />} 
  color="primary" 
  onPress={handlePress}
  animate={false} // 添加此属性禁用动画
/>

3. 检查React Native Reanimated配置 #

确保react-native-reanimated的babel插件配置正确，且放在插件列表最后：
修改babel.config.js：

module.exports = {
  presets: ['babel-preset-expo'],
  plugins: ['react-native-reanimated/plugin'],
};

然后清除缓存重启Metro：

expo start --clear

4. 避免Modal与FAB的动画冲突 #

尝试修改Modal的动画类型为none，或自定义动画，避免和FAB的动画驱动产生冲突：

<Modal visible={modalOpen} animationType="none">
  {/* 模态框内容 */}
</Modal>

内容的提问来源于stack exchange，提问作者Hasan