it-swarm.com.ru

Проблема, требующая модуля изображения в React Native

Просто начинаю с 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>

При упаковке и запуске моего приложения я получаю ошибку рендеринга: error image

Я понимаю, что вам нужно добавить изображения в xcode как набор изображений, чтобы вызов require мог найти изображение и добавил для этого набор изображений: bg image

... но безрезультатно. У кого-нибудь есть мысли? Я прочитал документы и кажется, чтобы делать это в установленном порядке. Спасибо!

38
markthethomas

Со времени выхода React Native 0.14 обработка изображений нормализовалась для iOS и Android и теперь отличается. Я не смог найти никакой документации, кроме этой очень четкой заметки о коммите на Github: Документировать новую систему активов .

Там только скриншот предлагаемой документации:  enter image description here

Обновление: Теперь имеется ссылка для реальной документации: https://facebook.github.io/react-native/docs/images.html

43
jlapoutre

У меня была похожая проблема, затем я переименовал файлы изображений в файловой системе в каталогах xcode project Images.xcassets с суффиксами и прописными буквами, чтобы соответствовать изображению, которое я загружаю. 

Например, если для source={require('image!Villagers')} требуются файлы изображений, названные точно как Villagers.png, [email protected] и [email protected]. Если бы части имени @ @x не было, изображение не было бы найдено. 

31
McG

Какую версию React Native вы используете? С упаковщиком была связана проблема, которая была решена.

Если это так, вы можете обновить или запустить сервер dev с помощью:

node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets

https://github.com/facebook/react-native/issues/282

4
tadeuzagallo

На этот вопрос уже был дан ответ, но если вы используете React Native на Android, у вас может возникнуть та же проблема. Для меня решение было использовать source={{ uri: "google", isStatic: true }} вместо source={required('./bg.png')}.

Только не забудьте добавить свои изображения в папку src/main/res/drawable.

3
Hadrien Beaufils

ПРИМЕЧАНИЕ. Сборка приложения требуется для новых ресурсов Каждый раз, когда вы добавляете новый ресурс в Images.xcassets, вам нужно будет перекомпилировать свое приложение с помощью XCode, прежде чем вы сможете его использовать - перезагрузка из> симулятора недостаточна . (из React Native docs https://facebook.github.io/react-native/docs/image.html#content

Также обязательно перезапустите упаковщик. Это решило проблему для меня. 

2
user1813705

Вы можете легко ссылаться на изображения, сделав файл package.json в вашей папке ресурсов.

Структура папок проекта

package.json

И вы можете назвать это по этому коду.

<Image 
   source={require('assets/img/avatar.png')} 
   style={styles.itemAvatar}
   resizeMode={'cover'}
/>
1
Alex Petre

Для статических изображений вам необходимо указать путь: 

<Image source={require('./images/back.png')}  
style= {{width:25, height:25, marginLeft:12, padding:12}}/>

Это сработало для меня, для изображения, хранящегося в папке images каталога проекта:

0
Анураг Пракаш