在 React-Native 中获取“TypeError: interpolate is not a function”

Question

我目前正在学习react-native。

我在这个项目中主要使用- react-navgation，FlatList并react-native-magnus为UI。
它接受一个对象数组，并使用 FlatList 为每个数组项返回卡片列表（来自 Magnus UI）。

导航结构是这样的？ 图片链接

为了更好的可访问性，我附上了我的项目，希望它有帮助吗？ https://wetransfer.com/downloads/4b8af09bde680e8e17bcc05a662e4ef820210604152955/6b3f64

在我的代码中，我被这个错误困住了？

TypeError: interpolate is not a function. (In 'interpolate(this.progress, {
              inputRange: [PROGRESS_EPSILON, 1],
              outputRange: [0, 1]
            })', 'interpolate' is undefined)

This error is located at:
    in NavigationContainer (at App.js:13)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

Stack trace:
  node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
  node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
  node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
  node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
  node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
  node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
  node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
  node_modules\regenerator-runtime\runtime.js:293:29 in invoke
  node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
  node_modules\regenerator-runtime\runtime.js:154:27 in invoke
  node_modules\regenerator-runtime\runtime.js:164:18 in PromiseImpl.resolve.then$argument_0
  node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
  node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
  node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
  [native code]:null in flushedQueue
  [native code]:null in invokeCallbackAndReturnFlushedQueue

这些是项目的主要 JS 文件？，但我还提到了上面整个项目的链接？

代码 App.js

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

import Navigator from './routes/drawer';

//Test Screens //
// import MagnusCard from './magnus/magnusCard'

export default function App() {
  return (

    <Navigator /> //<<

    //Test Screens //
    // <MagnusCard />

  )
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

代码 抽屉.js

import React from 'react';
import { View, Text } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';

// stacks
import HomeStack from './homeStack';
import AboutStack from './aboutStack';

// drawer navigation options
const RootDrawerNavigator = createDrawerNavigator({
    Home: {
        screen: HomeStack,
    },
    About: {
        screen: AboutStack,
    },
});

export default createAppContainer(RootDrawerNavigator);

代码 homeStack.js

import React from 'react';
import { View, Text } from 'react-native';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import Home from '../screens/homeStack/home'
import ReviewDetails from '../screens/homeStack/reviewDetails'

//Shared Components
import Header from '../shared/header';

const screens = {
    Home: {
        screen: Home,
        navigationOptions: ({ navigation }) => {
            return {
                headerTitle: () => <Header title="Home" navigation={navigation} />
            }
        }

    },
    ReviewDetails: {
        screen: ReviewDetails,
        navigationOptions: {
            title: "Review Details"
        }
    },
}

const HomeStack = createStackNavigator(screens);

export default HomeStack;

代码 home.js

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, FlatList, TouchableOpacity } from 'react-native';

// Shared Components
import MagnusCard from '../../magnus/magnusCard';

export default function Home({ navigation }) {

    const [reviews, setReviews] = useState([
        { title: 'Zelda, Breath of Fresh Air', rating: 5, body: 'lorem ipsum', key: '1' },
        { title: 'Gotta Catch Them All (again)', rating: 4, body: 'lorem ipsum', key: '2' },
        { title: 'Not So "Final" Fantasy', rating: 3, body: 'lorem ipsum', key: '3' },
    ]);

    return (
        <View style={styles.container}>
            <View style={styles.topBox}>
                <Button
                    onPress={() => { navigation.navigate('ReviewDetails') }}
                    title="Details" style={styles.btnToRevDetails} />
                <Text style={styles.explainerText}>?Click here to view Review Screen</Text>
            </View>
            <View style={styles.listOfItems}>

                <FlatList data={reviews} renderItem={({ item }) => (
                    <TouchableOpacity>
                        {/* onPress={() => navigation.navigate('ReviewDetails', item)} */}

                        <MagnusCard />
                    </TouchableOpacity>
                )} />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
    topBox: {
        flexDirection: 'row',
        margin: 4, padding: 10, alignItems: 'center'
    },
    listOfItems: { margin: 10, padding: 4 },
    btnToRevDetails: {
        flex: 3
    },
    explainerText: {
        flex: 7,
        fontSize: 16,
    }
})

Answer 1

我也遇到了这个问题，在过去的几周里我伤透了脑筋。这看起来是react-navigation-drawer包与react-native-reanimated之间的版本冲突。现在刚刚修好了。在react-native-reanimated@2+ 中，interpolate() 被重命名为 interpolateNode()。无需降级react-native-reanimated包。

目前解决此问题的一个简单方法是（我尝试在react-navigation-drawer库上提交拉取请求，但是，它被设置为只读。因此您可以在本地更改它）

1. 打开文件夹Drawer.js中找到的文件<project folder>/node_modules/react-navigation-drawer/lib/module/views/。

2. 您会在两个地方找到 interpolate ，将这两个地方的替换interpolate为。interpolateNode

重建您的代码。它应该有效。

Answer 2

interpolate()在《复活2》中被重命名为interpolateNode()。

Answer 3

我遇到了这个错误，并通过降级react-native-reanimate到2.1.0. 尝试一下，但我认为存在一个错误，因为删除node_modules并再次安装后，问题被重现，并通过卸载包（ ）并使用版本react-native-reanimate再次安装来解决它2.1.0

Answer 4

也许您的react-navigation-drawer版本与react-native-reanimated的版本冲突。试着跑npm i --save react-native-reanimated@1.0.0。

如果可能的话分享您的package.json代码。