React 原生 flex 布局与绝对大小

Question

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

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

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

谁能帮忙？

Answer 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>

或者看看这个小吃