我可以给出样式数值的高度元素,例如,40
但这些必须是整数。如何使我的组件具有高度100%
?
8 回答
查看flexbox 文档。在样式表中,使用:
flex:1,
将窗口高度抓取到一个变量中,然后将其分配为您要定位的 flex 容器的高度:
let ScreenHeight = Dimensions.get("window").height;
在你的风格中:
var Styles = StyleSheet.create({ ... height: ScreenHeight });
请注意,您必须在使用之前导入Dimensions:
import { ... Dimensions } from 'react-native'
您可以简单地添加height: '100%'
到项目的样式表中。这个对我有用
flex:1
几乎适用于任何情况。但是,请记住 for ScrollView
,它contentContainerStyle
控制视图的高度:
错误的
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView style={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>
正确的
const styles = StyleSheet.create({
outer: {
flex: 1,
},
inner: {
flex: 1
}
});
<ScrollView contentContainerStyle={styles.outer}>
<View style={styles.inner}>
</View>
</ScrollView>
大多数时候应该使用flexGrow: 1
或flex: 1
或者你可以使用
import { Dimensions } from 'react-native';
const { Height } = Dimensions.get('window');
styleSheet({
classA: {
height: Height - 40,
},
});
如果它们都不适合您,请尝试:
container: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}
Try this:
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'skyblue'}} />
</View>
You can have more help in react-native online documentation (https://facebook.github.io/react-native/docs/height-and-width).
<View style={styles.container}>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
}
})
我使用的是 ScrollView,所以这些解决方案都没有解决我的问题。直到我contentContainerStyle={{flexGrow: 1}}
在我的滚动视图上尝试了道具。似乎没有它-scrollviews 将始终与它们的内容一样高。
我的解决方案在这里找到:React native, children of ScrollView wont fill full height