Javascript 在 React Native 中需要图像模块的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29308937/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trouble requiring image module in React Native
提问by markthethomas
Just getting started with React-Nativeand I'm having some trouble requiring a static image.
刚刚开始使用React-Native，我在需要静态图像时遇到了一些麻烦。
Here's the very-basic code I have so far:
这是我到目前为止的非常基本的代码：
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} = React;
var buzz = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Image source={require('image!bg')} style={styles.bg}>
<Text style={styles.welcome}>
Welcome to Buzz! iOS interface to
</Text>
<Text style={styles.welcomeHeader}>Charityware</Text>
</Image>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent'
},
welcomeHeader: {
fontWeight: '600',
fontFamily: 'Helvetica',
color: '#fff',
fontSize: 50,
alignSelf: 'center'
},
bg: {
width: 400,
height: 300,
alignSelf: 'auto',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
},
});
AppRegistry.registerComponent('buzz', () => buzz);
The main trouble area is:
主要的问题区域是：
<Image source={require('image!bg')} style={styles.bg}>
<Text style={styles.welcome}>
Welcome to Buzz! iOS interface to
</Text>
<Text style={styles.welcomeHeader}>Charityware</Text>
</Image>
When packaging my app and running it, I get a render error:
打包我的应用程序并运行它时，出现渲染错误：
I understand that you need to add images in xcode as an image set in order for the requirecall to find the image and have added an image set to that end:
我知道您需要在 xcode 中添加图像作为图像集，以便require调用找到图像并为此添加了图像集：
...But to no avail. Anyone have any thoughts? I've read the docs and seemto be doing this in the prescribed way. Thanks!
……但无济于事。有人有什么想法吗？我已经阅读了文档，并且似乎按照规定的方式执行此操作。谢谢！
回答by jlapoutre
Since React Native release 0.14the handling of images has been normalized for iOS and Android and is now different. I could not find any documentation except for this very clear commit note on Github: Document new asset system.
自 React Native 发布0.14以来，iOS 和 Android 的图像处理已经标准化，现在有所不同。除了 Github 上这个非常明确的提交说明之外，我找不到任何文档：文档新资产系统。
There's only a screenshot of the proposed documentation:
只有提议文档的屏幕截图：
Update: There is a link now for the real documentation: https://facebook.github.io/react-native/docs/images.html
更新：现在有一个真实文档的链接：https: //facebook.github.io/react-native/docs/images.html
回答by McG
I had similar problem, then renamed the image files in file system under the xcodeproject's Images.xcassetsdirectories with suffixes and capitalization to match the image I'm loading.
我遇到了类似的问题，然后将xcode项目Images.xcassets目录下的文件系统中的图像文件重命名为后缀和大写以匹配我正在加载的图像。
For example, if
source={require('image!Villagers')}it required the image files named precisely as Villagers.png, [email protected]and [email protected]. If the '@3x' part of filename wasn't there, the image would not get found.
例如，如果
source={require('image!Villagers')}它需要精确命名为Villagers.png,[email protected]和[email protected]. 如果文件名的“@3x”部分不存在，则无法找到图像。
回答by tadeuzagallo
What version of React Native are you running? There was an issue with the packager, related to that, that have been solved.
你在运行什么版本的 React Native？与此相关的打包程序存在问题，已解决。
If that's the case, you can either update or run the dev server with:
如果是这种情况，您可以使用以下命令更新或运行开发服务器：
node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets
回答by Hadrien Beaufils
This question has already been answered, but if you use React Native on Android, you might have that same problem. For me, solution was using source={{ uri: "google", isStatic: true }}instead of source={required('./bg.png')}.
这个问题已经有了答案，但是如果你在 Android 上使用 React Native，你可能会遇到同样的问题。对我来说，解决方案是使用source={{ uri: "google", isStatic: true }}而不是source={required('./bg.png')}.
Just don't forget to add your images in src/main/res/drawablefolder.
只是不要忘记将您的图像添加到src/main/res/drawable文件夹中。
回答by user1813705
NOTE: App build required for new resources Any time you add a new resource to Images.xcassets you will need to re->build your app through XCode before you can use it - a reload from within >the simulator is not enough. (from React Native docs https://facebook.github.io/react-native/docs/image.html#content)
注意：新资源需要应用程序构建 每当您向 Images.xcassets 添加新资源时，您都需要通过 XCode 重新构建应用程序，然后才能使用它 - 从模拟器内部重新加载是不够的。（来自 React Native 文档https://facebook.github.io/react-native/docs/image.html#content）
Also make sure to restart the packager. That solved the issue for me.
还要确保重新启动打包程序。那为我解决了这个问题。
回答by Mikhail Gorelyshev
You can easy to refer the images by making the package.json file in your assets folder.
您可以通过在资产文件夹中创建 package.json 文件来轻松引用图像。
And you can call it by this code.
您可以通过此代码调用它。
<Image
source={require('assets/img/avatar.png')}
style={styles.itemAvatar}
resizeMode={'cover'}
/>
回答by Анураг Пракаш
For static images, you need to provide the path like:
对于静态图像，您需要提供如下路径：
<Image source={require('./images/back.png')}
style= {{width:25, height:25, marginLeft:12, padding:12}}/>
This worked for me, for the image stored in images folder of project directory:
这对我有用，对于存储在项目目录的图像文件夹中的图像：
