Блог

У меня возникла проблема с размещением моего изображения за границей моего представления или div. Я попытался добавить абсолютную позицию и использовать свойство top, но это не сработало. вот мой код:

 const Card = () => {
  return (
    <View style={styles.mainContainer}>
      <View style={styles.imageContainer}>
          <Image style={styles.mainImage} source={require('../assets/Img/office.jpg')} />
      </View>
      <View style={styles.locationContainer}>
        <View style={styles.textContainer}>
          <Text style={styles.mainText}>Welcome to the finest future of business</Text>
        </View>
        <View style={styles.locationContainer}>
          <Text>location</Text>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
 mainContainer: {
   width: '100%',
   height: 300,
   borderRadius: 30,
  //  overflow: 'hidden',
   borderWidth: 4,
   borderColor: '#EDF1F2',
 },
 imageContainer: {
  height: '70%',
 },
 mainImage: {
   width: '100%',
   height: '100%',
   borderRadius: 30,
 }

})

 

вот в чем цель:

вот результат моего кода:

Проблема в том, что граница находится за пределами

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

  const Card = () => {
  return (
    <View style={styles.mainContainer}>
      <View style={styles.imageContainer}>
          <Image style={styles.mainImage} source={require('../assets/Img/office.jpg')} />
      </View>
      {/* ... */}
      <View style={styles.background} />
    </View>
  )
}

const styles = StyleSheet.create({
 mainContainer: {
   width: '100%',
   height: 300,
   borderRadius: 30,
   overflow: 'hidden',
 },
 background: {
   position: 'absolute',
   top: 4,
   right: 4,
   bottom: 4,
   left: 4,
   borderWidth: 4,
   borderRadius: 30,
   borderColor: '#EDF1F2',
   backgroundColor: '#ffffff',
   zIndex: 0
 }
 // ...
})
 

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