react-native: изображение не отображается, если не задана ширина или высота

номер версии: 0.38

просто укажите стиль изображения с помощью гибкости, без ширины и высоты, но изображение не будет отображаться на экране мобильного устройства. Как это сделать.

<View style={styles.container}>
    <Image style={styles.image} source={{uri : 'https://www.baidu.com/img/bd_logo1.png'}}>
    </Image>
</View>



const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  image: {
     flex: 1,
    resizeMode: 'contain'
  },
});

react-native reactjs react-native-android
person youhan26    schedule 01.12.2016    source источник
comment
Попробуйте image: {flex: 1, width: null, height: null} для стиля.   -  person Samuli Hakoniemi    schedule 01.12.2016

Ответы (1)


arrow_upward
6
arrow_downward

Сетевые изображения требуют, чтобы вы установили свойства стиля высоты / ширины.

React Native Documentation.

Многие изображения, которые вы будете отображать в своем приложении, будут недоступны во время компиляции, или вы захотите загрузить некоторые динамически, чтобы уменьшить двоичный размер. В отличие от статических ресурсов, вам нужно будет вручную указать размеры вашего изображения.

// GOOD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />

// BAD
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
person BradByte    schedule 01.12.2016
comment
Да спасибо. Но как реализовать макет Pinterest 1. как получить ширину родительского элемента, а не окна? 2. Как удалить пустое пространство после использования resizeMode для сохранения галереи？ Большое спасибо - person youhan26; 02.12.2016
comment
Чтобы получить высоту / ширину окна и вручную рассчитать размер изображения на основе количества строк / ячеек и т. д. - person BradByte; 02.12.2016