React Native Flex Layout с абсолютным размером

Question

У меня есть следующая гибкая раскладка, определенная для использования с приложением React Native (извините за уродливый цвет фона):

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

Мне нужно, чтобы нижняя часть имела абсолютную высоту (скажем, 50 пикселей), а верхняя часть должна заполнить все остальное пространство, чтобы я мог разместить там некоторые значки меню.

Может кто-нибудь помочь?

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>

или взгляните на эту закуску