react-native - React Native Flex Child Growth 似乎受 Padding 影响

Question

在 React Native 中使用 flex 进行布局时，我遇到了一些困难。我已经减少了我在以下问题中遇到的行为。

我有一个填充可用空间的容器，因为它的 flex 设置为 1。然后我在该容器中有一个应该填充容器的子容器，所以我将它的 flex 设置为 1。我还希望容器在最佳。因此，我希望孩子能够填补除前 20% 之外的所有父母。但是，我看到的是在子容器的顶部和底部有相等的填充（好像我设置了 paddingVertical 而不是 paddingTop）。

有谁能够解释为什么会这样？我也对我在制作零食来说明这个问题时看到的行为很感兴趣。在 iOS 和 Android 模拟器上，我遇到的行为对我来说似乎是错误的，而 Web 视图似乎可以正常工作，但顶部只有一个间隙。

谢谢！

小吃示例代码

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.child}>
        <Text>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'green',
    paddingTop: '20%'
  },
  child: {
    flex:1,
    backgroundColor:'red'
  },
});

Android - “破碎”行为 Web - “预期”行为

标签： react-nativeflexbox