Просто начинайте с React-Native, и у меня возникают проблемы с статическим изображением.
Вот самый базовый код, который у меня есть до сих пор:
'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);
Основная область проблем:
<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>
При упаковке моего приложения и его запуске я получаю ошибку рендеринга:
Я понимаю, что вам нужно добавить изображения в xcode в качестве изображения, установленного для вызова require, чтобы найти изображение и добавили изображение, установленное с этой целью:
... Но безрезультатно. У кого-нибудь есть мысли? Я прочитал документы и, кажется, делаю это в установленном порядке. Спасибо!
Начиная с версии React Native 0.14 обработка изображений была нормализована для iOS и Android и теперь отличается. Я не мог найти никакой документации, кроме этой очень четкой фиксации в Github: Документ новой системы активов.
Есть только скриншот предлагаемой документации:
Обновление: Теперь есть ссылка на настоящую документацию: https://facebook.github.io/react-native/docs/images.html
У меня была схожая проблема, затем переименовали файлы изображений в файловой системе в каталогах xcode project Images.xcassets с суффиксами и заглавными буквами в соответствии с загружаемым изображением.
Например, если
source={require('image!Villagers')} потребовались файлы изображений, названные точно как Villagers.png, [email protected] и [email protected]. Если "filename" "@3x" не было, изображение не будет найдено.
Какую версию React Native вы используете? Проблема с пакетом, связанным с этим, была решена.
Если это произойдет, вы можете либо обновить, либо запустить сервер dev с помощью:
node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets
Этот вопрос уже был дан ответ, но если вы используете React Native на Android, у вас может возникнуть такая же проблема. Для меня решение использовало source={{ uri: "google", isStatic: true }} вместо source={required('./bg.png')}.
Не забудьте добавить свои изображения в папку src/main/res/drawable.
ПРИМЕЧАНИЕ. Создание приложения требуется для новых ресурсов Каждый раз, когда вы добавляете новый ресурс в Images.xcassets, вам нужно будет снова создать приложение через XCode, прежде чем вы сможете его использовать - перезагрузка изнутри > симулятора недостаточно. (из React Native docs https://facebook.github.io/react-native/docs/image.html#content)
Также обязательно перезапустите упаковщик. Это решило проблему для меня.
Вы можете легко передать изображения, сделав файл package.json в своей папке с ресурсами.
И вы можете называть его этим кодом.
<Image
source={require('assets/img/avatar.png')}
style={styles.itemAvatar}
resizeMode={'cover'}
/>
Для статических изображений вам необходимо указать путь, например:
<Image source={require('./images/back.png')}
style= {{width:25, height:25, marginLeft:12, padding:12}}/>
Это сработало для меня, для изображения, хранящегося в папке с изображениями каталога проекта: