如何在 React Native 中使用百分比填充顶部和底部？答案

【问题标题】：How to use percentage padding top and bottom in React Native?如何在 React Native 中使用百分比填充顶部和底部？
【发布时间】：2019-09-11 15:09:36
【问题描述】：

我正在尝试实现动态填充顶部和底部。我知道 paddingTop 和 paddingBottom with % 将使用容器的宽度，我对此很好。

不幸的是，当我使用 % 将 paddingTop 设置为任何值时，它会将 paddingBottom 设置为相同的值。基本上paddingTop: '5%', paddingBottom: '0%' 会给我两边相等的 5% 填充。

如果我将 paddingBottom 设置为任何 % 值 - 它只是被添加到来自顶部的值。所以：paddingTop: '5%', paddingBottom: '10%' 导致paddingBottom 等于 15%...

我在一个 Web 项目中检查了相同的解决方案，并且它按预期工作。

出现问题的零食： https://snack.expo.io/BJ9-2t8LB

问题出在 Android 和 iOS 上。

如何解决？

【问题讨论】：

标签： css react-native

【解决方案1】：

将值应用到要应用的子容器，而不是父容器。

我已经根据你想要的条件修改了答案。您应该将底部的区域发送到父容器。因为它们在孩子的容器中相互交互，所以它们必须是独立的。

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.wrapper}>
        <View style={styles.inner}>
          <View style={{ backgroundColor: 'yellow' }}>
            <Text>TOP</Text>
          </View>
        </View>
        <View style={{ backgroundColor: 'red', }}><Text>BOTTOM</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex:1,
    paddingLeft: 24,
    paddingRight: 24,
    backgroundColor: 'green',
    paddingBottom:"5%"
  },
  inner: {
    flex:1,
    justifyContent: 'space-between',
    backgroundColor: 'blue',
    marginTop:"10%"
  },
});

【讨论】：

是的，现在您在这里遇到了问题的另一个变体 - 红色框不在底部。在这个版本中，底部有一个填充，等于 marginTop 高度...
红色应该在蓝色的底部吗？
是的，根据小吃中的网络示例。如果你看一下代码，那里没有任何额外的空间。
@Michal 我已经为您设定了条款。请看修改后的答案。

【解决方案2】：

这是一种奇怪的行为，您应该将其作为问题提交给react-native。

与此同时，解决方法是将marginTop 和marginBottom 应用于内部View，而不是paddingTop 和paddingBottom 应用于包装器View。

【讨论】：