Javascript 在react native中消耗空间

如何包装图像和文本以仅使用适当的高度

这是我现在实现的，但这不是我想要的，因为我下面有一个表单不会显示，因为文本标题和图像占用了很多空间

Home file
<Container>
  <ImageBackground style={styles.container} source={require('../../../assets/BG_SignIn.png')}>
   <Header />
   <Form />
  </ImageBackground>
</Container>

主文件

头文件

<View style={styles.header}>
    <View style={styles.signInHeader}>
       <H1>Sign In</H1>
        <Text>I don't have an account, yet.</Text>
    </View>
    <View style={styles.birdHeader}>
       <Birds width="100%" height="100%" />
    </View>

<Form>
            <Item floatingLabel>
                <Label>Mobile / Email</Label>
                <Input />
            </Item>
            <Item floatingLabel>
                <Label>Password</Label>
                <Input secureTextEntry={true} />
            </Item>
            <Button block rounded style={{ marginTop: 20, backgroundColor: "white" }}>
                <Text style={{ color: "#018377", fontSize: 20 }}>Sign In</Text>
            </Button>
            <Text style={{ margin: 15, }}>Forgot your password?</Text>
        </Form>
</View>

const styles = StyleSheet.create({
    header: {
        display: "flex",
        flexDirection: "row",
        flex: 1
    },
    signInHeader: {
        flex: 4,
        marginTop: 20,
        borderWidth: 1,
        borderColor: 'red',
    },
    birdHeader: {
        flex: 2,
        borderWidth: 1,
        borderColor: 'red'
    }

})

登录
我还没有账户。
手机/电子邮件
密码
登录
忘记密码了？
const styles=StyleSheet.create({
标题：{
显示：“flex”，
flexDirection:“行”，
弹性：1
},
签名者：{
弹性：4，
玛金托普：20，
边框宽度：1，
边框颜色：“红色”，
},
鸟头：{
弹性：2，
边框宽度：1，
边框颜色：“红色”
}
})

只需在视图中换行，并根据需要设置flex即可

<View style={{flex: 0.5}}>
    <View style={styles.signInHeader}>
        <H1>Sign In</H1>
        <Text>I don't have an account, yet.</Text>
    </View>
    <View style={styles.birdHeader}>
        <Birds width="100%" height="100%" />
    </View>
</View>

<View style={{flex: 0.5}}>
    <Form>
        ...
    </Form>
</View>

登录
我还没有账户。
...

如果您能为我们提供一个关于您的问题的html示例，我们将更容易为您提供帮助