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

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

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

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

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

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

Android 和 iOS 均存在此问题。

怎么解决呢？

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

我已经根据你想要的条件修改了答案。您应该将 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%"
  },
});