react-native 中的宽度和高度答案

【问题标题】：Width and Height In react-nativereact-native 中的宽度和高度
【发布时间】：2020-01-19 16:24:10
【问题描述】：

请解释由什么原则视图尺寸与元素样式形成。我学习了 FlexBox，但它打破了我的所有理解。

代码

export const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.element}>
          <View style={styles.element1}></View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    backgroundColor: 'green',
  },
  element: {
    // width: '100%',
    // height: '100%',
    backgroundColor: 'yellow',
    // top: '5%',
  },
  element1: {
    width: '50%',
    height: '80%',
    backgroundColor: 'red',
  },
});

【问题讨论】：

为什么不在你的容器上使用display: flex;？ React 只是提供内容的一种方式。 CSS 仍然是 CSS。

标签： css react-native flexbox

【解决方案1】：

您可以使用flex: 1 代替 width: '100%', height: '100%',.

Flex: 1 表示组件（如果是视图）具有1 的优先级值，这意味着，如果没有另一个组件在同一视图上 与flex: 1 ，组件将占据整个屏幕。如果有两个组件 flex: 1，每个组件将占据整个屏幕的 50%。

这是文档：React native flexbox

【讨论】：