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

Question

我正在尝试实现动态填充顶部和底部。我知道{％{％{1}}和paddingTop将使用容器的宽度，我对此表示满意。

不幸的是，当我将paddingTop设置为带有％的任何值时，它会将paddingBottom设置为相同的值。基本上paddingBottom会给我双方相等的5％填充。

如果我将paddingBottom设置为任何％值-它将被添加到顶部的值中。因此：paddingTop: '5%', paddingBottom: '0%'得出paddingTop: '5%', paddingBottom: '10%'等于15％...

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

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

该问题同时出现在Android和iOS上。

如何解决？

Answer 1

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

同时，一种解决方法是将marginTop和marginBottom应用于内部View，而不是paddingTop和paddingBottom应用于包装器{{ 1}}。

Answer 2

将该值应用于要应用的子容器，而不应用于父容器。

我已根据所需条件修改了答案。您应将Bottom的领土发送到父母的容器。因为它们在孩子的容器中彼此交互，所以它们必须独立。

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%"
  },
});