时间戳

首页 > 解决方案 > react-native 中的宽度和高度

css - react-native 中的宽度和高度

问题描述

请解释形成元素样式的原则视图大小。我学习了 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',
  },
});

标签： cssreact-nativeflexbox

解决方案

您可以使用flex: 1而不是 width: '100%', height: '100%',.

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

这是文档：React native flexbox

推荐阅读