React Native Flex 布局与绝对大小答案

【问题标题】：React Native Flex Layout With Absolute SizeReact Native Flex 布局与绝对大小
【发布时间】：2019-01-21 22:29:39
【问题描述】：

我定义了以下用于 React Native 应用程序的 flex 布局（请原谅丑陋的背景颜色）：

const master = StyleSheet.create({
    component: {
        flex: 1,
        backgroundColor: "#ff69b4",
    },
    topSection: {
        //flex: 1,
    },
    bottomSection: {
        //flex: 2,
        justifyContent: "flex-end",
        backgroundColor: "white",
        height: 50,
    }
});

我需要底部为绝对高度（例如 50 像素），顶部填充所有其他空间，以便我可以在其中放置一些菜单图标。

谁能帮忙？

【问题讨论】：

如果你将顶部部分删除怎么办：flex: 1?
Here a snack
这也是一种美味的小吃。米洛尔，如果您想将您的回复作为答案发布，我会接受并给您一些假想点。
我已经写了一个答案，但后来我意识到它只是改变了那行，所以我把它删除了

标签： react-native flexbox

【解决方案1】：

这符合您的要求吗？

  component: {
    flex: 1,
    backgroundColor: '#ff69b4'
  },
  bottomSection: {
    justifyContent: 'flex-end',
    backgroundColor: 'white',
    height: 50,
  },
  topSection: {
    flex: 1
  }

假设component是容器，比如

  <View style={styles.component}>
    <View style={styles.topSection} />
    <View style={styles.bottomSection} />
  </View>

或者看看这个snack

【讨论】：

看起来不错。当我看着它时，原来的答案在我身上消失了。