React Native - 容器底部的粘性頁腳

Question

我正在試圖在right容器的底部將<View>稱爲footer粘貼。

這是一個活生生的例子：
https://rnplay.org/apps/G3rHqQ

如果我做比對一個更高的左側容器，那麼它不會工作。如果有合適的容器比左側一個高於工程....

紅色和橙色的元素是動態的，不同的高度取決於它們的內容。相反，藍色的應該始終堅持正確的容器底部。

我也嘗試過position: 'absolute'; bottom:0; left: 0; right: 0;它確實堅持到底部，但只有如果正確的容器比左側高。

Answer 1

看起來你需要在最外面的容器上設置一個flex：1來獲得你想要的flex特性。我已經建立了一個工作項目here並粘貼了下面的代碼。

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); 

Answer 2

我試圖做同樣的事情。我需要一個視圖來堅持底部。我使用poistion: 'absolute', bottom:0，它確實堅持到底部，但視圖的寬度不再伸展。