Question

我正在研究React Native，并试图了解组件样式的行为。

我只是创建一个简单的应用程序并测试填充样式。

为什么删除填充样式时框消失了？

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.box} />
        <View style={styles.box} />
        <View style={styles.box} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    padding:20, //remove this line
    margin: 4,
    backgroundColor: 'steelblue'
  }
});

Answer 1

原因<View />就像HTML中的<div>一样，其大小由其内容决定，如果删除填充，则它占用0空间。

即使<View />不包含内容，也可以使其保持可见的一种方法是将flex设置为{flex：1}

Answer 2

“框视图”必须为固定尺寸，如下所示：

box: {
    //width: 50,
    //height: 50,
    padding:20,
    margin: 4,
    backgroundColor: 'steelblue'
  }

通过填充，它的大小是固定的，但是如果删除填充，它将没有大小。

或者您可以像这样使用 Flex尺寸：

box: {
    flex:1,
    padding:20,
    margin: 4,
    backgroundColor: 'steelblue'
  }

在这一行中，您可以安全地删除padding:20,行。

删除“填充”后，“查看”消失

2 个答案: