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

【问题标题】：React native always 100% width and height depending on parent反应原生总是 100% 的宽度和高度取决于父级
【发布时间】：2022-01-13 09:18:56
【问题描述】：

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

【问题讨论】：

标签： css react-native

【解决方案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，谢谢