尝试在 React Native (Expo) 上使用 Moti 时出错答案

【问题标题】：Getting error trying to use Moti on React Native (Expo)尝试在 React Native (Expo) 上使用 Moti 时出错
【发布时间】：2022-09-29 01:13:19
【问题描述】：

渲染错误 | null 不是对象（评估 \'dispatcher.useContext）

控制台警告 |无效的挂钩调用

我按照所有说明安装 Moti。

安装 Moti
安装 Reanimated v2
在 App.js 上导入 \'react-native-reanimated\'
在 Babel 上添加插件：[\'react-native-reanimated/plugin\']
在 MainApplication.java 中重新激活插件

我不知道我能做什么。

我的代码

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,

    }
})

标签： react-native moti

【解决方案1】：

如果您安装了多个版本的 React，则可能会发生此问题。

如果您使用纱线：

您可以尝试运行yarn why react 吗？如果您看到多个版本，我建议您在 package.json 中尝试使用纱线解析：

{
  "resolutions": {
    "react": "your-version-here"
  }
}

然后运行yarn install --force 并使用expo start -c 重新启动您的应用程序。

如果你使用 npm

您可以尝试运行npm install --legacy-peer-deps 吗？

【讨论】：