对本地文件使用 <Image>

Question

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

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

Answer 1

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

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

记得然后通过样式设置宽度和高度属性:

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

Answer 2

来自 UIExplorer 示例应用：

Static assets should be required by prefixing with image! and are located in the app bundle.

像这样：

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 阻止它正常工作。

如果 node_modules（带有 react_native）与 xcode 项目位于同一文件夹中，您可以编辑 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 和 pull it references

Answer 6

使用 React Native 0.41（2017 年 3 月），针对 iOS，我发现它就像：

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

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

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

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

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

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

Answer 7

我在使用 react-native-navigation 时遇到了问题，我创建了自己的 header 组件，然后在标题前的左侧插入了一个图像 - 作为徽标，然后当我触发时导航到另一个屏幕然后再次返回，徽标再次加载，超时接近 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 文件并在其中做 require。

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}]} />

对本地文件使用 <Image>

Use <Image> with a local file

react-native