如何使用单独的 data.jsx 文件获取本地图像？

Question

两种方法都试过了，还是不行！

const Data = [
    {
        image: ('./cake.png'),
        title:"candy", 
        text:"Orange Candy", 
        ingred :"abc, xyx", 
        price:"$5"
    },
    {
        image:"../assets/images/cake.png",
        title:"cake", 
        text:"Cake", 
        ingred :"pqr, aaa", 
        price:"$10"
    }

];
export default Data;

Answer 1

文档：https://reactnative.dev/docs/image

用法：

    import React, {FC} from 'react';
    import {Image, SafeAreaView, Text} from 'react-native';

    const data = {
      image: require('./src/assets/random-picture.png'),
      text: 'lala random text',
    };

    const App: FC = () => {
      return (
        <SafeAreaView>
          <Image source={data.image} />

          <Text>{data.text}</Text>
        </SafeAreaView>
      );
    };

    export default App;

替代方案：

在根目录下创建types.d.ts 添加

declare module '*.png';
declare module '*.jpg';
declare module '*.svg';

保存

使用进口：

import React, {FC} from 'react';
import {Image, SafeAreaView, Text} from 'react-native';
import RandomImage from './src/assets/random-picture.png';

const data = {
  image: RandomImage,
  text: 'lala random text',
};

const App: FC = () => {
  return (
    <SafeAreaView>
      <Image source={data.image} />

      <Text>{data.text}</Text>
    </SafeAreaView>
  );
};

export default App;