[英]Consuming space in 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'
}
})
只需包裹在視圖中並根據需要設置 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.