如何在两个背景视图之间实现浮动徽标布局？

Question

我正在尝试实现与该图像的第二种布局相似的布局，我希望背景图像占据大约40％的屏幕，然后在其下方包含我的内容的视图，但是我希望就像我的徽标漂浮在两者之间。类似于“ G”位于图像和内容之间的方式。我尝试过使用两个视图并将徽标嵌套在第一个视图中，并尝试将其放置在绝对位置，但是我在水平居中时遇到了麻烦，使其变为宽度的10％并有一个完美的圆，因为您似乎无法在绝对定位的元素。

这是我的尝试

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。