ScrollView 中的 React-Native 固定页脚？答案

【问题标题】：React-Native fixed Footer within ScrollView?ScrollView 中的 React-Native 固定页脚？
【发布时间】：2018-01-27 00:55:51
【问题描述】：

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

在我介绍 ScrollViews 之前，我的代码如下所示：

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

在引入 ScrollView 后，我不得不删除 flex: 1，否则 ScrollView 根本无法滚动。在那之后justifyContent 变得无用了，因为弹性容器的高度没有设置为100%。因此Views 只是彼此相邻出现。

为了明确我的观点一般应该是什么样子：

按钮应该不粘在底部，但应该出现在底部（如果可能的话）。

【问题讨论】：

你的意思是按钮应该和其他内容一起滚动，而位置应该是flex-end？
按钮不应该是固定的/静态的，所以如果内容太大，在用户滚动之前按钮可能不可见。我想要实现的是一个布局，看起来按钮是固定的，但实际上支持屏幕尺寸太小而无法显示常规内容的可能性（例如，如果设备旋转）。

标签： react-native flexbox

【解决方案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,
  }
}));

【讨论】：

但他说按钮不应该是粘性的，绝对位置实际上使它具有粘性