React Native - Sticky footer an den unteren Rand des Containers

Sieht es aus wie Sie benötigen, um einen flex:1 auf der äußersten container, um die flex-Eigenschaften so zu arbeiten, wie Sie wollen. Ich habe ein funktionierendes Projekt hier und klebte den code unten, wie gut.

https://rnplay.org/apps/WoceXg

'use strict';

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

const SampleApp = React.createClass({
  render: function() {
    return (
      <View style={{ flex:1 }}>
        <View style={styles.wrapper}>
          <View style={styles.left}>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
            <Text>Left</Text>
          </View>
          <View style={styles.right}>
            <View style={styles.rightInner}>
              <View style={styles.content}>
                <Text>content</Text>
                <Text>content</Text>
              </View>
              <View style={styles.footer}>
                <Text>Sticky</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={{ flex:1 }}></View>
      </View>
    );
  },
});

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
    paddingTop: 50,
    flex:1
  },
  left: {
    backgroundColor: 'lightblue',
    flex: 1,
  },
  right: {
    backgroundColor: 'lightgreen',
    flex: 4,
  },
  rightInner: {
    flex: 1,
    backgroundColor: 'orange',
  },
  content: {
    flex: 1,
  },
  footer: {
    backgroundColor: 'green',
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

InformationsquelleAutor Nader Dabit