React Native Expo with Moti给出TypeError：null不是对象(评估'dispatcher.useContext')错误

Question

我创建了一个新的Expo项目来播放不同的动画(npx create-expo-app my-app(，并安装了react native reanimated和moti(npx expo install react-native-reanimated moti(。当我导入它时，我没有问题，但当我想做一个简单的动画时，我会得到以下错误：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

TypeError: null is not an object (evaluating 'dispatcher.useContext')

这是我的代码，它是一个简单的加载cirle:

import * as React from 'react';
import { View } from 'react-native';
//Tried both imports
import { MotiView } from '@motify/components'
import { MotiView } from 'moti'
const LoadingIndicator = ({size}) =>{
return <MotiView
from={{
width:size,
height:size,
borderRadius: size /2,
borderWidth:0,
shadowOpacity:0.5
}}
animate={{
width:size +20,
height:size + 20,
borderRadius: (size +20) /2,
borderWidth:size / 10,
shadowOpacity:1
}}
transition={{
type:'timing',
duration:1000,
// repeat: Infinity,
loop:true
}}
style={{
width:size,
height:size,
borderRadius: size / 2,
borderWidth: size / 10,
borderColor: '#fff',
shadowColor:'#fff',
shadowOffset:{width:0, height:0},
shadowOpacity:1,
shadowRadius:10
}}
/>
}
const LoadingScreen= () => {
return(
<View style={{
flex:1,
alignItems:'center',
// paddingTop:300,
justifyContent:'center',
backgroundColor:'#010100'
}}
>
<LoadingIndicator size={100}/>
</View>
)
}
export default LoadingScreen;

我在App.js:中导入这个

return(
{loading ? <LoadingScreen/> : <MainView/>}
)

这是我的包.json

{
"name": "simple-qrcode",
"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",
"eas-build-pre-install": "npm install --save --legacy-peer-deps"
},
"dependencies": {
"expo": "~46.0.9",
"expo-dev-client": "~1.2.1",
"expo-status-bar": "~1.4.0",
"moti": "^0.18.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-reanimated": "~2.9.1"
},
"devDependencies": {
"@babel/core": "^7.12.9"
},
"private": true
}

Answer 1

您得到这个错误是因为您一直在功能组件外部使用钩子，只需在内部更改它，错误就会得到修复

Answer 2

此问题的原因之一是安装了不同版本的React。我遇到了同样的问题，就这样解决了。

如果您正在使用npm，请运行此操作。

npm install --legacy-peer-deps

然后用expo start -c启动项目

如果您正在使用yarn，请将其添加到您的package.json中，然后重新启动项目：

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