В режиме прокрутки React Native не отображается изображение

#android #react-native #scrollview

#Android #react-native #scrollview

Вопрос:

Ниже приведен мой код кода приложения react native. Но он не показывает изображение. я переместил стиль контейнера из режима прокрутки в изображение, из-за чего изображение отображалось неверным образом.

 <ScrollView vertical={true} style={styles.container} >
  <Image
    style={{ width: '100%', height: '100%' }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
  </Image>
</ScrollView>

здесь стиль контейнера

 container: {
  flex: 1,
  backgroundColor: 'gray',
  padding: 10
},

На экране больше нечего отображать

1. Рендерится ли он без прокрутки?

2. Можете ли вы попробовать указать размеры вручную? Вместо того , чтобы устанавливать их на 100% ? например, width: 200, height: 200

3. @Nerius Шутит, да

Ответ №1:

Не используйте flex:1 in ScrollView , если это не исправит проблему, попробуйте установить определенную ширину и высоту, как предложено другими

 <ScrollView vertical={true} style={styles.container} >
   <Image
     style={{ width: 200, height: 200 }}
     source={{ uri: this.props.navigation.state.params.PassedURL }}>
    />
</ScrollView>

Стиль контейнера

 container: {
  backgroundColor: 'gray',
  padding: 10
},

Редактировать:

Если вы хотите, чтобы оно было заполнено на всю ширину, просто установите ширину на 100%, а высота будет соответствующим образом скорректирована и, возможно, установите ResizeMode = «содержать» или «покрывать» в зависимости от ваших потребностей

1. Это не работает, так как мне нужен адаптивный размер, я не знаю высоту или ширину изображения, я просто хочу, чтобы изображение занимало всю ширину, сохраняя соотношение сторон по высоте

2. если вы хотите, чтобы оно было заполнено на всю ширину, просто установите значение 100%, и высота будет скорректирована соответствующим образом и, возможно, установите ResizeMode = «содержать» или «покрывать» в зависимости от ваших потребностей @conor909

Ответ №2:

это потому, что вы настраиваете высоту и вес изображения в процентах

 <Image
    style={{ width: '100%', height: '100%' }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
</Image>

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

 <Image
    style={{ width: 100, height: 100 }}
    source={{ uri: this.props.navigation.state.params.PassedURL }}>
</Image>

Ответ №3:

Вот как я это сделал:

 function getAspectRatio(img) {
    const data = Image.resolveAssetSource(img);
    return data.width / data.height;
}

...

<ScrollView horizontal={true} >
    <Image source={img} resizeMode='contain' 
        style={{ 
            height: '100%', 
            width: undefined, 
            aspectRatio: getAspectRatio(img) 
        }}
    />
</ScrollView>

Он имеет высоту вида и сохраняет соотношение сторон изображения.