在 react-native 中将组件高度设置为 100%答案

【问题标题】：Setting component height to 100% in react-native在 react-native 中将组件高度设置为 100%
【发布时间】：2015-06-02 08:01:38
【问题描述】：

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

【问题讨论】：

标签： react-native

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

这里有错误：const { Height } = Dimensions.get('window')，使用height（小写字母）提取数据

【解决方案3】：

<View style={styles.container}> 
</View>

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})

【讨论】：

【解决方案4】：

flex:1 几乎适用于任何情况。但是，请记住对于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>

【讨论】：

这是一个
我不知道contentContainerStyle。这为我解决了这个问题:-)
最佳解决方案

【解决方案5】：

试试这个：

  <View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'skyblue'}} />
  </View>

您可以在 react-native 在线文档 (https://facebook.github.io/react-native/docs/height-and-width) 中获得更多帮助。

【讨论】：

【解决方案6】：

将窗口高度放入一个变量中，然后将其指定为您要定位的 flex 容器的高度：

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

按照你的风格：

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

注意，使用前必须先导入Dimensions：

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

【讨论】：

height: "100vh" 在 react-native 中产生严重错误，这就是为什么使用 Dimensions.get("window").height

【解决方案7】：

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

【讨论】：

您的项目正在运行什么版本？我正在使用 49.3，它仍然运行良好
不知道为什么这被否决了。在我的机器上完美运行（tm）
@Southerneer 答案没有错。这很有效，我每天都使用 iOS 和 Android 与 RN 一起工作。查看 RN repo 中的这个 sn-p，例如：github.com/facebook/react-native/blob/… 它使用百分比的高度和宽度。我不能说为什么没有记录在案，但它确实有效。我尽可能多地使用 flex，但是当您需要相对大小时，flex 和 Dimensions 并不总是适用。
这是在此处添加的，并被标记为 0.51：github.com/facebook/react-native/commit/… 因此，随着 11 月发布的 React Native，这是受支持的。
更新文档：facebook.github.io/react-native/docs/layout-props.html#width

【解决方案8】：

查看flexbox doc。在样式表中，使用：

flex:1,

【讨论】：

这实际上将高度和宽度都设置为 100%。只设置高度？
你设置flex-direction了吗？
抱歉——我不知道我到底做了什么改变，但它现在似乎可以按我想要的方式工作。我使用flex 选项来增加元素。
问题是这也会使内部的元素居中，否则这些元素会被定位到屏幕的顶部......