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

Bla*_*aba 34 react-native

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

但是我不确定那些图片的反应在哪里.这些示例没有任何域名,因此您似乎必须转到Xcode并将它们添加到Images.xcassets,但这对我不起作用.

spe*_*ter 27

使用React Native 0.41(2017年3月),以iOS为目标,我发现它很简单:

<Image source={require('./myimage.png')} />
Run Code Online (Sandbox Code Playgroud)

图像文件必须与需要它的.js文件存在于同一文件夹中.

我没有必要改变XCode项目中的任何内容.它刚刚起作用.也许事情在2年内发生了很大的变化!

请注意,如果文件名中包含除小写字母以外的任何内容,或者路径不是"./",那么对我来说,它开始失败.不确定限​​制是什么,但开始简单并向前发展.

希望这对某人有所帮助,因为上面的所有答案看起来都过于复杂并且充满了(顽皮的)异地链接.

更新:BTW - 官方文档在这里:https: //facebook.github.io/react-native/docs/images.html


小智 20

它完全按照您的预期工作.有一个错误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/拉/ 286 /文件.它会神奇地工作:)

如果您的react_native安装在其他地方并且补丁不起作用,请在https://github.com/facebook/react-native/issues/282上发表评论,让他们了解您的设置.


小智 8

如果动态加载图像,可以创建一个如下所示的 .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')
  }
]
Run Code Online (Sandbox Code Playgroud)

在您的组件 .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 (...);
}
Run Code Online (Sandbox Code Playgroud)


apu*_*kar 6

要显示本地文件夹中的图像,您需要编写代码:

 <Image source={require('../assets/self.png')}/>
Run Code Online (Sandbox Code Playgroud)

在这里,我已将图像放入资产文件夹中。


Gio*_*gos 6

ES6解决方案:

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

const DEFAULT_IMAGE = Image.resolveAssetSource(DefaultImage).uri;
Run Code Online (Sandbox Code Playgroud)

进而:

<Image source={{uri: DEFAULT_IMAGE}} />
Run Code Online (Sandbox Code Playgroud)


小智 5

从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>
  );
}
Run Code Online (Sandbox Code Playgroud)


cro*_*ies 5

我有这个完全相同的问题,直到我意识到我没有把图像放在我的Image.xcassets.我能够通过Image.xcassets打开将其拖放到Xcode中,重建后,它解决了问题!

在此输入图像描述


Bru*_*ade 5

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

徽标.json

{"file" : "base64 big string"}
Run Code Online (Sandbox Code Playgroud)

应用程序.js

import Logo from '.../Logo.json'
...
<Image source={{uri:Logo.file}} />
Run Code Online (Sandbox Code Playgroud)