ScrollView中的React-Native固定页脚？

Question

我想创建具有动态内容的视图，该视图应该具有某种类型的页脚，通常应该（如果有足够的空间）看起来像是粘在底部。

在我介绍ScrollViews之前，我的代码看起来像这样：

<View style={{flex: 1, justifyContent: 'space-between'}}>
  <View>{content}</View>
  <View>{stickyFooter}</View>
</View>

在介绍ScrollView之后，我必须删除flex: 1，否则ScrollView根本不可滚动。之后justifyContent变得无用，因为flex-container的高度未设置为100%。因此，Views只是彼此相邻。

要明确我的观点应该是什么样子：

按钮应不粘在底部，但它应显示在底部（如果可能）。

Answer 1

这是一个老问题了，但是为了像我一样从谷歌搜索中最终受益的人们，我在下面粘贴了对我有用的解决方案。

标记

  render = () => {
    return (
      <View>
         <ScrollView style={styles.container}>
            ...
         </ScrollView>
         <TouchableOpacity style={styles.floatingActionButton}>
           <RkButton
             rkType='stretch'>
             <RkText>Do stuff</RkText>
           </RkButton>
         </TouchableOpacity>
      </View>
    )
  }

样式

const styles = StyleSheet.create(theme => ({
    floatingActionButton: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    bottom: 10,
    left: 10,
    right: 10,
    borderRadius: 10,
  }
}));