在反应原生中将组件高度设置为100%

Question

我可以给出样式数值的高度元素,40但这些必须是整数.如何让我的组件高度为100%？

Answer 1

看看flexbox doc.在样式表中,使用:

flex:1,

Answer 2

将窗口高度抓取到变量中,然后将其指定为要定位的Flex容器的高度:

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

在你的风格:

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

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

import { ... Dimensions } from 'react-native'

Answer 3

您只需添加height: '100%'到项目的样式表中即可.这个对我有用

Answer 4

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>

Answer 5

大部分时间应该使用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,
}