Question

我的主视图下有两个视图

    <View style={styles.container}>
      <View style={styles.header}>
        <Image
          resizeMode="contain"
          source={require("../assets/logo-large.png")}
          style={styles.logo}
        />
      </View>

      <View style={styles.content}>
        <TextInput
          style={styles.input}
          onChangeText={(email) => setEmail(email)}
          defaultValue={email}
          placeholder="Your email"
          autoCompleteType="email"
          textContentType="emailAddress"
        ></TextInput>
      </View>

我的样式代码如下：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "gold",
  },
  content: {
    flex: 2,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "lightblue",
  },
});

我想要实现的是在屏幕顶部放置一个带有徽标的header，在下面放置一个content，但是我想将content中的所有元素顶部对齐。目前，这些元素在center中已content对齐。

有人可以帮忙吗？

Answer 1

由于主视图默认默认为flex-direction = column，因此内容样式justifyContent: "center",将内容的元素排列在垂直的中间，而alignItems: "center"将其元素放置在水平的中心。您需要删除这些内容，以使内容元素从顶部开始。

请将您的样式更新为以下样式。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  header: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "gold",
  },
  content: {
    flex: 2,
    alignItems: "center",
    backgroundColor: "lightblue",
  },
});

祝你好运

Answer 2

我已经使用justifyContent和header样式的footer对其进行了调整。

  header: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center",
    backgroundColor: "gold",
    paddingBottom: "10%",
  },
  content: {
    flex: 2,
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "lightblue",
  },

从底视图顶部对齐元素

2 个答案: