如何解决React Native中使用Moti库时的MotiImage未定义错误？

你遇到的错误信息：

ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[3], "moti").MotiImage')

问题原因 #

你使用的moti版本是0.17.1，这个版本里MotiImage并非从'moti'主包导出，而是单独拆分到了'moti/image'路径下，直接从主包导入会导致找不到该组件，触发上述错误。

解决方案 #

修改导入语句，将MotiImage的来源改为'moti/image'：

// 替换原来的 import {MotiImage} from 'moti';
import MotiImage from 'moti/image';

修改后的完整代码示例 #

import { StyleSheet, Text, View, Image } from "react-native";
import React from "react";
import { SIZES, images } from "../../constants";
import MotiImage from 'moti/image';

const Walkthrough2 = ({ animate }) => {
    console.log("Moti Images", MotiImage);
    return (
        <View style={{flex:1, overflow:'hidden'}} >
           <Text>Walkthrough2:</Text>
           {/* 可以正常使用MotiImage组件，示例如下 */}
           {/* <MotiImage
               source={images.sampleImage}
               style={styles.image}
               animate={{ opacity: animate ? 1 : 0 }}
           /> */}
        </View>
     );
  };

export default Walkthrough2;

const styles = StyleSheet.create({
    image: {
    position: "absolute",
    width: 86,
    height: 102,
    zIndex: 0,
    borderRadius: SIZES.radius,
  },
});

额外注意事项 #

• 修改后建议重启Metro服务并清除缓存，避免旧缓存干扰：

npx react-native start --reset-cache

• 重新运行项目，错误即可消除。

内容的提问来源于stack exchange，提问作者AbdulmateenChitrali