無法在本機反應中導入 svg：這些文件都不存在

Question

我正在嘗試導入 svg，我使用transform.tools 將其轉換為 jsx。 但是，當我嘗試將它導入我的組件時，它說unable to resolve module: none of these files exist 。

我檢查了導入行中的路徑，沒問題。

這是文件夾結構：

我想在 PlayButton.js 中導入 Letsplay.jsx

下面是我如何在我的組件中導入 jsx

import React from 'react';
import {TouchableOpacity, Animated} from 'react-native';
import LetsPlay from './LetsPlay'; // <<--- here

const PlayButton = ({navigation}) => {
  return (
    <Animated.View>
      <TouchableOpacity
        onPress={() => {
          navigation.navigate('GameSelection');
        }}>
        <LetsPlay /> // <<-- here
      </TouchableOpacity>
    </Animated.View>
  );
};

export default PlayButton;

這是 jsx 組件代碼：

import * as React from 'react';
import Svg, {Circle, G, Path, Defs} from 'react-native-svg';
/* SVGR has dropped some elements not supported by react-native-svg: filter */

function LetsPlay(props) {
  return (
    <Svg
      width={114}
      height={114}
      viewBox="0 0 114 114"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}>
      <Circle
        cx={57}
        cy={57}
        r={53.5}
        fill="#F2D330"
        stroke="#FCFCFA"
        strokeWidth={7}
      />
      <G filter="url(#filter0_d_85_425)">
        <Path
          d="M77 52.67c3.333 1.924 3.333 6.736 0 8.66L50.75 76.486c-3.333 1.924-7.5-.482-7.5-4.33V41.844c0-3.85 4.167-6.255 7.5-4.33L77 52.67z"
          stroke="#FCFCFA"
          strokeWidth={2.5}
          shapeRendering="crispEdges"
        />
      </G>
      <Defs />
    </Svg>
  );
}

export default LetsPlay;

我正在使用：“react-native”：“0.68.2”，“react-native-svg”：“^13.7.0”，

Answer 1

導入后是否重建項目？ 這個問題發生在 iOS 還是 Android 上？

Answer 2

我看不出有任何錯誤，但您是否嘗試過將LetsPlay.jsx的擴展名更改為LetsPlay.js ？