63

我可以给出样式数值的高度元素,例如,40但这些必须是整数。如何使我的组件具有高度100%

4

8 回答 8

66

查看flexbox 文档。在样式表中,使用:

flex:1,
于 2015-03-29T08:16:32.330 回答
54

将窗口高度抓取到一个变量中,然后将其分配为您要定位的 flex 容器的高度:

let ScreenHeight = Dimensions.get("window").height;

在你的风格中:

var Styles = StyleSheet.create({ ... height: ScreenHeight });

请注意,您必须在使用之前导入Dimensions:

import { ... Dimensions } from 'react-native'
于 2016-03-16T12:33:24.087 回答
33

您可以简单地添加height: '100%'到项目的样式表中。这个对我有用

于 2017-10-28T17:29:04.823 回答
21

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>

于 2021-01-14T13:13:40.043 回答
6

大多数时候应该使用flexGrow: 1flex: 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,
}
于 2018-11-17T15:00:16.727 回答
4

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).

于 2018-10-22T04:11:52.923 回答
0
<View style={styles.container}> 
</View>
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})
于 2020-07-07T12:27:14.727 回答
0

我使用的是 ScrollView,所以这些解决方案都没有解决我的问题。直到我contentContainerStyle={{flexGrow: 1}}在我的滚动视图上尝试了道具。似乎没有它-scrollviews 将始终与它们的内容一样高。

我的解决方案在这里找到:React native, children of ScrollView wont fill full height

于 2021-12-08T02:59:51.480 回答