React Native 图片绝对路径

Question

我的应用程序中的图像位于 appname/assets/<>，我想用绝对路径引用它们，因为我可能会在多个相对位置将它们与多个组件一起使用。我知道如何使用{require('../assets/image.png')}，但是我想把图片的绝对路径作为一个字符串保存在数据库中，以便在很多地方引用。我只是不知道要在“/assets/image.png”之前添加什么来创建这个绝对路径。我已经尝试了几个版本的“appname/assets/image.png”，但我就是想不通。应用程序的完整 React Native 文件树是什么样的？感谢您的帮助。

Answer 1

#1- Babel 根导入

Babel 插件更改导入到基于根路径的行为：

https://github.com/mantrajs/babel-root-slash-import

#2- Package.json

https://github.com/facebook/react-native/issues/3099#issuecomment-221815006

Answer 2

你可以通过这种方式解决这个问题。

确保图像文件（bank.png、visa.png）位于 assets/img 目录中。

首先，打开您的 package.json 文件。

{
...
   "dependencies":{
    ...
    "react": "17.0.1",
    ...
    "react-native": "0.64.3",
    ...
    }
...
}

其次，添加开发依赖以使用babel。

"devDependencies": {
    "@babel/core": "^7.12.9",
    "babel-plugin-module-resolver": "^4.1.0"
  },

第三，在项目根目录下创建babel.config.js，并在模块“babel-plugin-module-resolver”的别名内容中添加“@assets”。

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['babel-preset-expo'],
        plugins: [
            [
                require.resolve('babel-plugin-module-resolver'),
                {
                    root: ['./src/'],
                    alias: {                        
                        '@assets': './assets',
                    },
                },
            ],
            'react-native-reanimated/plugin',
        ],
    };
};

第四，在您的组件中，使用“@assets”别名导入图像。（例如：ItemList.js）

import { Image } from 'react-native';

import visa from '@assets/img/visa.png';
import bank from '@assets/img/bank.png';

function GetImage ({image}) {

   switch (image) {
            case 'visa': {
                return <Image source={visa} style={{ width: 80, resizeMode: 'contain' }} />;
            }           

            case 'bank': {
                return <Image source={bank} style={{ width: 30, resizeMode: 'contain' }} />;
            }

            default: {
                return <Image source={visa} style={{ width: 75, resizeMode: 'contain' }} />;
            }

   }

}

export default function ItemList () {
   return (

            <View
                style={{
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '100%',
                    alignItems: 'flex-start',
                }}
            >
                <GetImage image='bank'/>
                <GetImage image='visa'/>
                <GetImage />
            </View>
   )
}

React Native 图片绝对路径

React Native absolute image path

image

absolute-path

react-native