React Native Android开发：调整Logo高度为30%并与登录表单上下排列

当前你的Logo区域和表单区域因为都设置了flex: 1，所以会平分父容器的高度（各占50%）。要实现Logo占30%、表单占剩余空间的效果，只需调整两者的flex比例，或直接给Logo容器设置固定百分比高度即可。

修改后的样式代码 #

import { StyleSheet, Text, View } from "react-native";

export const HomeStyles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "flex-start",
      padding:10
    },
    imageWrapper:{
      flex: 0.3,
      width:'75%',
      alignItems: "center",
      justifyContent: "center",
      borderWidth:1,
      borderColor:'#000'
    },
    image: {
      width:'100%',
      height: 100,
      alignItems: "center",
      justifyContent: "center",
    },
    form: {
      flex: 0.7,
      width:'100%',
      alignItems: "center",
      justifyContent: "center",
    },
    username: {
      alignItems: "center",
      justifyContent: "center",
      marginBottom:15,
      borderColor: '#0a4b7c',
      outlineColor: '#0a4b7c',
    },
    password: {
      alignItems: "center",
      justifyContent: "center",
      marginBottom:15,
    },
    btnSubmit: {
      width:'100%',
      backgroundColor:'#0a4b7c',
      height: 60,
      alignItems: "center",
      justifyContent: "center",
    },
  });

关键修改点说明 #

• 将container的justifyContent从center改为flex-start：避免容器居中导致Logo和表单之间出现不必要的空白，让元素从顶部开始依次排列。
• 调整imageWrapper的flex值为0.3：在父容器flex:1的前提下，该值表示Logo区域占据30%的可用高度。
• 调整form的flex值为0.7：表单区域占据剩余70%的可用高度，确保表单紧随Logo下方显示。

你也可以选择另一种实现方式：给imageWrapper直接设置百分比高度，同时让表单填充剩余空间，效果一致：

imageWrapper:{
  height: '30%',
  width:'75%',
  alignItems: "center",
  justifyContent: "center",
  borderWidth:1,
  borderColor:'#000'
},
form: {
  flex: 1,
  width:'100%',
  alignItems: "center",
  justifyContent: "center",
},

内容的提问来源于stack exchange，提问作者Alaksandar Jesus Gene