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

Posted 2023-02-16

【中文标题】在 react-native 中将组件高度设置为 100%

【英文标题】：Setting component height to 100% in react-native

【发布时间】：2015-06-02 08:01:38

【问题描述】：

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

【参考方案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 选项来增加元素。

问题是这也会使内部的元素居中，否则这些元素会被定位到屏幕的顶部......