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

Question

我目前正在学习react-native。

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

导航结构是这样的 → Link to Image

为了更好的可访问性，我正在附上我的项目，希望对您有所帮助 → 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',
  },
});

代码 drawer.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. 打开位于 /node_modules/react-navigation-drawer/lib/module/views/ 文件夹中的 Drawer.js 文件
2. 您会在两个地方找到 interpolate，在这两个地方将 interpolate 替换为 interpolateNode。

重建您的代码。它应该可以工作。

Answer 2

也许你的 react-navigation-drawer 版本与 react-native-reanimated 的版本冲突。尝试运行npm i --save react-native-reanimated@1.0.0。

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

Answer 3

interpolate() 在 Reanimated 2 中重命名为 interpolateNode()。

Answer 4

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

Answer 5

可能是导致此错误的错误。你可以安装（react-native-reanimated@1.13.1）然后expo start --clear

Answer 6

我也遇到过这个问题，您不必降级您的 react-native-reanimated。在最新版本的 reanimated 中，interpolate 已更改为 interpolateNode。 因此，您只需打开 Drawer.js 文件，该文件位于：

node_modules\react-navigation-drawer\lib\module\views 并将 interpolate 替换为 interpolateNode。它位于两个地方，因此请务必同时更改它们。

这应该可以解决问题。