反应母语：保证金以百分比值

Question

我想在我的阵营本地项目中使用的保证金样式属性的百分比值，但它似乎减少我的视图组件之一的高度。如果我用绝对值替换百分比值，没有更多的问题，并能正常工作。你有没有尝试使用百分比值作为保证金在本地做出反应？这里是一个代码示例小重现此问题：

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.scene}>
        <View style={styles.card}>
          <View style={styles.container}>
            <Text>Hello World</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    scene: {
        backgroundColor: '#F9E8D5',
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'column'
    },
    card: {
        backgroundColor: '#E6D5C3',
        flex: 0.2,
        flexDirection: 'column',
        marginTop: '20%' // Replace by 20
    },
    container: {
        backgroundColor: '#FFFFFF',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center'
    }
});

非常感谢你 ！

Answer 1

甲组件的高度和宽度确定其在屏幕上的大小。

设置一个组件的尺寸的最简单方法是通过将一个固定的宽度和高度的风格。在所有维度阵营母语是无量纲的，并代表密度独立像素。

调整尺寸这种方式是很常见的，应始终呈现在完全相同的大小，无论屏幕尺寸的部件。

使用的组件的样式弯曲有分量扩展和基于可用空间缩小动态。通常你会使用柔性：1。

下面引用将是使用了造型

1. https://facebook.github.io/react-native/docs/height-and-width.html
2. https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb
3. https://facebook.github.io/react-native/docs/layout-props.html#paddingtop 使用尺寸来计算得到屏幕的高度和宽度。 var {height, width} = Dimensions.get('window'); 为了通过获得的屏幕尺寸指定百分比，并将其转换成百分比。 示例例如：

   const { height } = Dimensions.get('window');
   
   paddingTop: height * 0.1 // 10 percentage of the screen height