不变违规：TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' 找不到

Question

所以这是我第一次使用 Reanimated 2，不幸的是我的应用程序因上述消息而崩溃。无法查看我的应用屏幕。

不变违规：TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' 找不到。验证此名称的模块是否已在本机二进制文件中注册。

我在这里使用复活

import React from 'react'
import Item from '../../Common/Item'
import {View,Text,FlatList,StyleSheet , TouchableOpacity} from 'react-native'

import Animated, {useAnimatedStyle} from 'react-native-reanimated';
import {bin,mix,useTiming} from 'react-native-redash' 


const {interpolate,not}=Animated
const SectorItem=({sector,clients,index,opened,toggleSector})=> {
        const {name}=sector
        const ITEM_HEIGHT = 100
        const transition = useTiming(opened)
        const style = useAnimatedStyle(()=>({
          height: mix(transition,0,clients.length * ITEM_HEIGHT)
        }))
      
        //here we wll also have the clients of each sector 
        return <Item xStyle={styles.item}>
                <View>
                    <Text>{name}</Text>
                    <TouchableOpacity onPress={e=>toggleSector(index)}>
                      <Text>open</Text>
                    </TouchableOpacity>
                </View>
                <Animated.View style={style}>
                    <FlatList 
                       data   = {clients}
                       style  = {{...styles.Clientlist,display:opened?'flex':'none'}}
                       contentContainerStyle = {props =>(styles.flatList)}
                       showsVerticalScrollIndicator={false}
                       renderItem   = {({ item }) =><Item xStyle={{marginBottom:8}}> 
                         <TouchableOpacity>
                           {/* redirect to client  */}
                              <Text>{item.name} </Text>
                         </TouchableOpacity>
                       </Item> }
                       keyExtractor = {(item, index) => index.toString()}
                    />
                </Animated.View>
        </Item>
   
}

export default SectorItem
var styles = StyleSheet.create({
    list:{
        borderColor:'#fff',
        padding:16,
    },
    Clientlist:{
        borderColor:'#fff',
        padding:16,
    },
    flatList:{ 
        alignItems: 'center',
         justifyContent: 'center', 
         height:200,
         flex:1
    },
    item:{
        marginBottom:8
    }
  });
  

我的 package.json ：

{
  "name": "DistributionApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.11.5",
    "@react-navigation/native": "^5.9.0",
    "@react-navigation/stack": "^5.13.0",
    "@rematch/core": "^2.0.0-next.10",
    "cross-fetch": "^3.0.6",
    "nanoid": "^3.1.20",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-elements": "^3.1.0",
    "react-native-fast-image": "^8.3.4",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-reanimated": "^2.0.0-rc.2",
    "react-native-redash": "^16.0.8",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.16.1",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "typescript": "^4.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/runtime": "^7.8.4",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^25.1.0",
    "eslint": "^6.5.1",
    "jest": "^25.1.0",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

在android中没有自动链接reanimated package，请按照官方文档中提到的步骤进行。

您需要在 android/app/build.gradle

project.ext.react = [
 enableHermes: true,  // clean and rebuild if changing
]

在 babel.config.js 中添加以下内容

plugins: ['react-native-reanimated/plugin']

在 MainApplication.java 中添加以下内容

    @Override
    protected JSIModulePackage getJSIModulePackage() {
      return new ReanimatedJSIModulePackage(); // <- add
    }

Answer 2

我已将"react-native-reanimated": "2.0.0" 降级为"react-native-reanimated": "1.13.0"，

过去在终端 yarn add react-native-reanimated@1.13.0 或 npm install react-native-reanimated@1.13.0 --save

固定。

Answer 3

我在使用 React Native ^0.64.0 和 react-navigation 5.x 时遇到了同样的问题

官方文档中提到的重生依赖"react-native-reanimated": "^2.0.0"需要一些额外的配置，包括babel、Hermes 和 MainApplication.java

请按照官方文档解决React Native Reanimated

除了添加依赖项之外，还需要其他步骤 包.json

进行更改后，请确保清除 gradle 和 yarn（或 npm）缓存

Answer 4

按照官方指导帮助了我doc

Answer 5

运行 npx react-native link react-native-reanimated 为我解决了这个问题。

似乎这在 ios/Podfile 中添加了以下行：

pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'

Answer 6

Error - TurboModuleRegistry.getEnforcing(...): 'NativeReanimated'
Cause - React Native Reanimated 2.0

我收到了这个TurboModuleRegistry.getEnforcing(...): 'NativeReanimated' 错误，我找到了解决方案：

第 1 步 - 从 github 下载 react 原生项目：https://github.com/software-mansion-labs/reanimated-2-playground

第 2 步 - 然后运行命令

npm install
react-native start
react-native run-android

并构建应用程序。

第 3 步 - 当它工作时，移动您所需的项目文件并安装您所需的 npm 包。

第 4 步 - 然后运行命令

npm cache clean --force
cd android
gradlew clean    
gradle cleanBuildCache    
gradlew build --refresh-dependencies
cd..
npx react-native start --reset-cache
npx react-native run-android