在React Native(Expo)中使用Moti遇渲染错误及无效Hook调用问题求助

我在 Expo 环境下的 React Native 项目中使用 Moti 库时，遇到以下问题：

• 渲染错误：null is not an object (evaluating 'dispatcher.useContext')
• 控制台警告：Invalid Hook call

已经完成所有官方要求的安装配置步骤：

• 安装 Moti
• 安装 Reanimated v2
• 在 App.js 中导入 react-native-reanimated
• Babel 配置中添加 plugins: ['react-native-reanimated/plugin']
• 在 MainApplication.java 中配置 Reanimated

但问题依旧存在，我的 Header 组件代码如下：

import React from "react";
import {
    View,
    StyleSheet,
    Text,
    StatusBar,
    TouchableOpacity
} from 'react-native'

import { Feather } from '@expo/vector-icons'
import { MotiView, MotiText } from "moti";

const statusbarHeight = StatusBar.currentHeight ? StatusBar.currentHeight + 22 : 64;

export default function Header({name}){
    return(
        <View style={styles.container}>
            <MotiView 
                style={styles.content}
                from = {{
                    translateY: -150,
                    opacity: 1
                }}
                animate = {{
                    translateY: 0,
                    opacity: 1
                }}
                >

                <Text style={styles.username}>{name}</Text>

                <TouchableOpacity activeOpacity={0.9} style={styles.buttonUser}>
                    <Feather name="user" size={27} color="#FFF"/>
                </TouchableOpacity>
            </MotiView>
        </View>
    )
}

const styles = StyleSheet.create({
    container:{
        backgroundColor: '#8000ff',
        paddingTop: statusbarHeight,
        flexDirection: 'row',
        paddingStart: 16,
        paddingEnd: 16,
        paddingBottom: 44,
    },
    content:{
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    username:{
        fontSize: 18,
        color: '#FFF',
        fontWeight: 'bold'
    },
    buttonUser:{
        width: 44,
        height: 44,
        backgroundColor: 'rgba(255,255,255,0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 44/2
    }
})

可能的解决方法 #

1. 移除裸项目配置（Expo 专属） #

Expo 环境下不需要手动修改 MainApplication.java，该配置仅针对裸 React Native 项目。撤销对该文件的修改后，执行缓存清理：

expo r -c

2. 检查 Babel 插件顺序 #

Reanimated 的 Babel 插件必须放在配置的最后一位，确保 babel.config.js 格式如下：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // 其他插件均放在此处
      'react-native-reanimated/plugin' // 必须是最后一个插件
    ],
  };
};

3. 验证版本兼容性 #

Moti 和 Reanimated v2 对 React、React Native 版本有明确要求：

• React >= 17.0.2
• React Native >= 0.65.0
  查看 package.json 确认版本，若过低则执行升级：

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

4. 彻底清理依赖与缓存 #

执行以下步骤重置依赖环境：

# 删除依赖文件与锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install
# 清除 Expo 缓存并重启项目
expo r -c

5. 确认组件调用方式 #

确保 Header 组件是以 React 组件形式渲染，而非直接调用函数：
错误示例：

const header = Header({name: 'Daniel'});

正确示例：

<Header name="Daniel" />

6. 升级 Moti 到最新版本 #

确保使用的是兼容当前环境的 Moti 版本：

npm install moti@latest
# 或 yarn
yarn add moti@latest

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