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 的版本有冲突。尝试运行 npm i --save react-native-reanimated@1.0.0。

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

Answer 2

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

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

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

2 个答案: