时间戳

首页 > 解决方案 > 如何在两个背景视图之间实现浮动徽标布局？

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

问题描述

我正在尝试实现类似于此图像的第二个布局的布局这张照片我希望背景图像占据屏幕的 40%，然后在其下方显示一个包含我的内容的视图，但我希望我的徽标浮动在二。类似于“G”位于图像和内容之间的方式。我尝试有两个视图并将徽标嵌套在第一个视图中并尝试定位 absolute 但我无法将其水平居中，使其成为宽度的 10% 并具有完美的圆形，因为您似乎无法在绝对定位元素。

这是我的尝试

https://snack.expo.io/HkV0wEptE

标签： react-nativereact-native-android

解决方案

要使徽标居中，您只需将其放在具有屏幕宽度的视图中并将 alignItems 设置为“居中”即可。以下是如何进行此布局的简单示例：

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。

推荐阅读