Размещение изображения внутри изображения в React-Native

#css #reactjs #react-native

Вопрос:

Я хочу разместить изображение поверх другого изображения, но на него не должен влиять параметр родительские изображения «содержат». Если я удалю ResizeMode=»contain» , он будет работать нормально, но в остальном он выглядит так: введите описание изображения здесь

Что я хочу, так это поместить маленькое изображение ВНУТРИ родительского изображения. На самом деле я хочу разместить маленькое изображение точно по углам. Не на пустом месте из-за ResizeMode=»содержать». Мой код выглядит так:

 <PagerView style={styles.pager} initialPage={0} showPageIndicator>
    <View style={styles.picView} key={i}>
      <ImageBackground
        resizeMode="contain"
        style={styles.pic}
        source={{
          uri: post.contents[i].path,
        }}
      >
        <Image
          style={{ position: "absolute", height: 100, width: 100 }}
          source={{
            uri: post.contents[i].path,
          }}
        />
      </ImageBackground>
    </View>
  </PagerView>
 

Ответ №1:

Я надеюсь , что это сработает для вас, мне тоже пришлось сделать что-то подобное, поэтому я использовал вот так, и это сработало для меня.

 <PagerView style={styles.pager} initialPage={0} showPageIndicator>
    <View style={styles.container} key={i}>
      <ImageBackground
        resizeMode="contain"
        style={styles.pic}
        source={{
          uri: post.contents[i].path,
        }}
      >
     <View style={styles.container1}>
        <Image
          style={styles.image}
          source={{
            uri: post.contents[i].path,
          }}
        />
    </View>
      </ImageBackground>
    </View>
  </PagerView>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
container1: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
 
  pic: {
    flex: 1,
    width: '100%',
  },

  
});
 

Комментарии:

1. Какой компонент использует стиль container1? Я думаю, ты что-то упустил

2. Обновлен ответ @kutaykurt

3. Это не работает, маленькое изображение не отображается, потому что вы не дали никаких измерений стилю «изображение». Когда я даю ему свойства ширины и высоты и положение: абсолютное, он по-прежнему позиционирует себя в пустом пространстве