react-native - React Native Flex 布局与绝对大小

Question

我定义了以下用于 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 像素），顶部填充所有其他空间，以便我可以在那里放置一些菜单图标。

任何人都可以帮忙吗？

标签： react-nativeflexbox

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>

或者看看这个小吃