反应原生总是 100% 的宽度和高度取决于父级

Posted 2023-02-16

【中文标题】反应原生总是 100% 的宽度和高度取决于父级

【英文标题】：React native always 100% width and height depending on parent

【发布时间】：2022-01-13 09:18:56

【问题描述】：

我对@9​​87654321@ 元素有疑问。我有一个<Parent> 组件，它是一个View，我有一个<Child> 组件作为一个子组件，它也是一个View。我希望<Child> 始终是<Parent> 的 100% 宽度和高度。我知道我可以通过width: '100%' 和height: '100%' 但这是一种很好的造型方式吗？设置父组件和子组件的最佳做法是什么，父组件将定义宽度和高度，而子组件将始终取决于父组件？

【参考方案1】：

为此，您可以使用flex 来表示这样的样式：

import React from "react";
import  StyleSheet, Text, View  from "react-native";

const Flex = () => 
  return (
    <View style=[styles.container, 
      // Try setting `flexDirection` to `"row"`.
      flexDirection: "column"
    ]>
      <View style= flex: 1, backgroundColor: "red"  />
    </View>
  );
;

const styles = StyleSheet.create(
  container: 
    flex: 1,
   
  ,
);

export default Flex;

更多信息见this

【讨论】：

这有效，但仅适用于 flex-direction 设置为 row 的宽度，仅适用于 flex-direction 设置为 column 的 height。所以要么我有 100% 的宽度或 100% 的高度，但我想两者都有

好的，我想我发现了，下一个孩子也必须有 flex:1，谢谢