我无法在 React Native 中放置图片

Question

我正在尝试制作一个反应本机的应用程序，并且我开始至少在您单击该应用程序时将图像作为屏幕放置。

问题是应用程序无法找到我调用的图像或 javascript 文件。我试图更改文件的位置，但似乎没有任何作用。

这是开始屏幕文件的代码

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

const StartScreen = () => (
    <Image source = {require('./src/assets/images/StartScreen.png')} />
)

export default StartScreen

这是 App.js 文件的代码

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import StartScreen from './src/screens/StartScreen'

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View>
         <StartScreen />
      </View>
    );
  }
}

我应该得到图片，但我却被告知图片或文件不存在。 App.js 文件在文件夹的顶层，而图片和 StartScreen.js 在 src 文件夹中。

Answer 1

听起来您的问题出在您的文件夹结构和您用来获取图像的路径上。

据我所知，你的 StartScreen.js 文件在 screens 文件夹中（在 src 中），你的图像在 assets 文件夹中（也在 src 中）。

因此，在您的 StartScreen 组件中，您的图片的相对路径是错误的。查看 here 了解相对路径的工作原理。

试试下面的方法：

<Image source = {require('../assets/images/StartScreen.png')} />

我无法在 React Native 中放置图片

I am not able to place a picture in React Native

javascript

image

splash-screen

react-native