javascript - React Native - 无法从路径导入图像

Question

我有以下基本的反应本机代码：

import React from 'react';
import {StyleSheet, View, Image} from 'react-native';

//images
import login_blueGirl from './assets/images/login_blueGirl.png';


const App = () => {
  return (
    <>
     <View style={styles.container}>
        <Image source={login_blueGirl}></Image>
     </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column'
  }
});

export default App;

我得到一个Cannot find module './assets/images/login_blueGirl.png'. 当我输入./VSCode 时，给我自动完成选项：

关于为什么会发生这种情况的任何线索？

标签： javascriptreact-native

Answer 1

要像文件一样导入静态文件.png，可以声明

const blueGirl = require("assets/images/login_blueGirl.png");

Image然后你可以在组件中使用它

<Image style={styles.image} source={blueGirl} />

此外，图像用作自闭合标签，您无需添加另一个</Image>标签。

为了完全理解标签和语法是如何工作的，请查看官方文档 React Native API