文档说,引用静态图像的唯一方法是使用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)
要显示本地文件夹中的图像,您需要编写代码:
<Image source={require('../assets/self.png')}/>
Run Code Online (Sandbox Code Playgroud)
在这里,我已将图像放入资产文件夹中。
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)
我在使用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)
归档时间: |
|
查看次数: |
68459 次 |
最近记录: |