Question

我正在尝试创建个人资料页面ui，其中名称和生物容器等个人资料数据将保持50％到其顶部组件的底部，这是封面图片。

所以这是我的React Native代码，

<View style={styles.container}>
        <View style={styles.coverContainer}>

        </View>
        <View style={styles.profileDataContainer}>

        </View>
        <View style={styles.intrestsContainer}>

        </View>
        <View style={styles.topicsContainer}>

        </View>
      </View>

目前的风格，

const styles = StyleSheet.create({
  container: {

  },
  coverContainer: {
      height : 200,
      backgroundColor : 'blue'
  },
  profileDataContainer: {
      marginHorizontal : 30,
      backgroundColor: 'white',
      height : 200,
      shadowColor: "#e5e5e5",
      shadowOffset: {
        width: 0,
        height: 2
      },
      shadowRadius: 2,
      shadowOpacity: 1.0,
      elevation : 4,
      marginTop : -100,
  }

});

我添加了marginTop： - 100，使其看起来像我想要的结构。

所以这就是在将marginTop添加到-100后它现在看起来的样子，但是当我增加那个白色块的大小时，它没有响应。它不再停留在中心。

如何做到这一点需要帮助：（

Answer 1

您可以使用百分比代替逻辑像素，例如：

const WindowHeight = Dimensions.get('window').height;

export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
      <View style={styles.headerBackground}/>
      <View style={styles.header}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'grey',
  },
  headerBackground: {
    height: '30%',
    width: '100%',
    backgroundColor : 'blue'
  },
  header: {
    height: '30%',
    width: '80%',
    marginTop: WindowHeight * -0.15,
    backgroundColor : 'white'
  }
});

在这个例子中，我将蓝色背景和白色标题的高度设置为窗口高度的30％，并将marginTop设置为窗口高度的-15％（我必须使用尺寸，因为if I use a percentage it'll be the percentage of the width...）

你可以在小吃上运行我的例子：https://snack.expo.io/Hyd7ChplX

Answer 2

您可以将profileDataContainer嵌套在coverContainer中，并将其置于绝对值前50％。希望你能将它自己转换为你的React Native代码...

示例：

＆＃13;

.coverContainer{
    height: 200px;
    background-color: blue;
    position: relative;
    width: 100%;
}
.profileDataContainer {
    position: absolute;
    right: 10%;
    left: 10%;
    display: block;
    top: 50%;
    background-color: red;
    height: 200px;
}

＆＃13;

<div class="coverContainer"><div class="profileDataContainer"></div></div>

＆＃13;

将组件保持在其顶部组件的底部50％

2 个答案: