Как добиться плавного расположения логотипа между двумя видами фона?

Question

Я пытаюсь создать макет, похожий на второй макет этого изображения Я хотел бы, чтобы фоновое изображение занимало около 40% экрана, а затем вид под ним с моимсодержание, но я хотел бы, чтобы мой логотип плавал между ними.Аналогично тому, как «G» находится между изображением и содержимым.Я пробовал иметь два вида и вложить логотип в первый вид и пытался расположить абсолютное, но у меня возникают проблемы с его центрированием по горизонтали, делая его 10% ширины и имея идеальный круг, потому что кажется, что вы не можете использовать атрибуты flex наэлемент с абсолютным позиционированием.

Вот моя попытка

https://snack.expo.io/HkV0wEptE

Answer 1

Чтобы отцентрировать логотип, вы можете просто поместить его в представление с шириной экрана и установить для alignItems значение «center». Ниже приведен простой пример того, как сделать этот макет:

render() {
    return (
      <View style={myStyle.container}>
        <View style={myStyle.topBanner} />
        <View style={myStyle.contentArea}>
          <Text style={myStyle.contentTitle}>HERE LIES CONTENT</Text>
        </View>

        <View style={myStyle.midLogoRow}>
          <Image style={myStyle.midLogo} source={require('../../images/profile_achive.png')} />
        </View>
      </View>
    );
  }

и таблица стилей выглядит следующим образом:

const sWidth  = Dimensions.get('window').width;
const sHeight = Dimensions.get('window').height;
const myStyle = StyleSheet.create({
  container: {
    flex: 1,
    width: sWidth,
    backgroundColor: '#fff',
  },
  topBanner: {
    width: sWidth,
    height: sHeight * 0.4,
    backgroundColor: '#c5c5c5',
  },
  midLogoRow: {
    position: 'absolute',
    top: sHeight * 0.3,
    left: 0,
    width: sWidth,
    alignItems: 'center',
  },
  midLogo: {
    width: sHeight * 0.18,
    height: sHeight * 0.18,
  },
  contentArea: {
    marginTop: sHeight * 0.09,
    alignItems: 'center'
  },
  contentTitle: {
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold',
  },
});

как видите; строка, в которой находится ваш логотип (в моем случае это profile_achieve.png), расположена в самой нижней части, чтобы он отображался поверх всего остального. Верхнее поле для contentArea установлено равным 0,09 высоты экрана, то есть делением высоты логотипа на 2.