将 <Image> 与本地文件一起使用

Question

文档说引用静态图像的唯一方法是使用 require。

但我不确定 react 会在哪里获得这些图像。这些示例没有任何域，因此您似乎必须转到 Xcode 并将它们添加到 Images.xcassets，但这对我不起作用。

Answer 1

您必须向源属性添加一个具有名为“uri”的属性的对象，您可以在其中指定图像的路径，如下例所示：

<Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />

记得通过 style 属性设置宽度和高度：

var styles = StyleSheet.create({
   image:{
    width: 360,
    height: 40,
  }
});

Answer 2

来自 UIExplorer 示例应用：

静态资产应以image!为前缀，位于应用程序包中。

像这样：

render: function() {
  return (
    <View style={styles.horizontal}>
      <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
      <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
      <Image source={require('image!uie_comment_normal')} style={styles.icon} />
      <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
    </View>
  );
}

Answer 3

它完全按照您的预期工作。有一个错误https://github.com/facebook/react-native/issues/282 阻止它正常工作。

如果您在 xcode 项目所在的文件夹中有 node_modules（带有 react_native），您可以编辑 node_modules/react-native/packager/packager.js 并进行以下更改：https://github.com/facebook/react-native/pull/286/files。它会神奇地工作:)

如果您的 react_native 安装在其他地方并且补丁不起作用，请评论 https://github.com/facebook/react-native/issues/282 让他们知道您的设置。

Answer 4

在我意识到我没有将图像放入我的Image.xcassets 之前，我遇到了同样的问题。我可以在 Image.xcassets 打开的情况下将它拖放到 Xcode 中，重建后，它解决了问题！

Answer 5

这来自https://github.com/facebook/react-native/issues/282 为我工作：

adekbadek 于 2015 年 11 月 11 日发表评论 应该提到的是，您不必将图像放在 Images.xcassets 中 - 您只需将它们放在项目根目录中，然后就像 @anback 所写的那样 require('./myimage.png') 看看这个 SO 答案和它引用的拉动

Answer 6

使用面向 iOS 的 React Native 0.41（2017 年 3 月），我发现它很简单：

<Image source={require('./myimage.png')} />

图像文件必须与需要它的 .js 文件位于同一文件夹中，“./”才能正常工作。

我不必更改 XCode 项目中的任何内容。它刚刚工作。

请注意，路径似乎必须以“./”或“../”开头，并且必须全部小写。我不确定所有的限制是什么，但是从简单的开始并继续工作。

希望这对某人有所帮助，因为这里的许多其他答案似乎过于复杂并且充满了（顽皮的）场外链接。

更新：顺便说一句 - 官方文档在这里： https://reactnative.dev/docs/images

Answer 7

我在使用 react-native-navigation 时遇到了问题，我创建了自己的标题组件，然后在标题之前的左侧插入了一个图像 - 作为徽标，然后当我触发导航到另一个屏幕然后再次返回时，徽标再次加载，超时接近 1 秒，我的文件是本地的。我的解决方案：

Logo.json

{"file" : "base64 big string"}

App.js

import Logo from '.../Logo.json'
...
<Image source={{uri:Logo.file}} />

Answer 8

要显示本地文件夹中的图像，您需要写下代码：

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

这里我把我的图片放在了资产文件夹中。

Answer 9

如果动态加载图像，可以创建一个如下所示的 .js 文件并在其中添加。

export const data = [
  {
    id: "1",
    text: "blablabla1",
    imageLink: require('../assets/first-image.png')
  },
  {
    id: "2",
    text: "blablabla2",
    imageLink: require('../assets/second-image.png')
  }
]

在您的组件 .js 文件中

import {data} from './js-u-created-above';
...

function UsageExample({item}) {
   <View>
     <Image style={...} source={item.imageLink} /> 
   </View>
}

function ComponentName() {
   const elements = data.map(item => <UsageExample key={item.id} item={item}/> );
   return (...);
}

Answer 10

ES6 解决方案：

import DefaultImage from '../assets/image.png';

const DEFAULT_IMAGE = Image.resolveAssetSource(DefaultImage).uri;

然后：

<Image source={{uri: DEFAULT_IMAGE}} />

Answer 11

我们可以这样做：

const item= {
    image: require("../../assets/dashboard/project1.jpeg"),
    location: "Chennai",
    status: 1,
    projectId: 1
}




<Image source={item.image} style={[{ width: 150, height: 150}]} />