像 Flipkart 一样反应原生的粘性页脚答案

【问题标题】：Sticky footer in react native like flipkart像 Flipkart 一样反应原生的粘性页脚
【发布时间】：2020-06-13 04:48:29
【问题描述】：

我想开发一个可以向上滚动的粘性页脚。一旦 UI 的某些部分滚动，页脚也可以向上移动，并且 UI 的其余部分是可见的。就像出现 Flipkart 产品详细信息页面一样。

【问题讨论】：

不清楚你想要实现什么。您尝试过的图表或示例代码会有所帮助
如果您在 Flipkart 或产品详细信息页面的大篮子应用程序上注意到，他们有添加到购物车和立即购买按钮。这些按钮针对产品细节是固定的。一旦它开始显示类似的产品，这两个按钮也会向上移动。

标签： react-native user-interface sticky-footer

【解决方案1】：

在底部创建一个粘性按钮
在 srollview 中获取元素滚动位置
获取屏幕高度
计算您的元素在滚动视图中可见的大约高度
当您的元素可见时隐藏粘性按钮

工作示例：https://snack.expo.io/@msbot01/playful-bagel（在 iphone 或 android 模式下查看）

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React,{Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  Flatlist,
  Dimensions
} from 'react-native';

var height = Dimensions.get('window').height

export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = {
      visible: true
    };
  }

  componentDidMount(){
    console.log('height::'+height)
  }





  render() {
      return (

         <View style={{ flex: 1}}>
          <ScrollView contentContainerStyle={{flexGrow:1}} 
            ref={(s) => this.scrollview = s}
            onScroll= {(event) => {
              // console.log(event.nativeEvent.contentOffset.y)

                  if (event.nativeEvent.contentOffset.y >=173) {
                  this.setState({
                    visible:false
                  })
                  }else{
                     this.setState({
                        visible:true
                    })
                  }
              }}

              onScrollEndDrag={(event) => {
                if (event.nativeEvent.contentOffset.y >=173) {
                  this.setState({
                    visible:false
                  })
                  }else{
                     this.setState({
                        visible:true
                    })
                  }
              }}
            >
           <View>
            <Text style={{fontSize:30, height:50 }}>1</Text>
            <Text style={{fontSize:30, height:50 }}>2</Text>
            <Text style={{fontSize:30, height:50 }}>3</Text>
            <Text style={{fontSize:30, height:50 }}>4</Text>
            <Text style={{fontSize:30, height:50 }}>5</Text>
            <Text style={{fontSize:30, height:50 }}>6</Text>
            <Text style={{fontSize:30, height:50 }}>7</Text>
            <Text style={{fontSize:30, height:50 }}>8</Text>
            <Text style={{fontSize:30, height:50 }}>9</Text>
            <Text style={{fontSize:30, height:50 }}>10</Text>
            <Text style={{fontSize:30, height:50 }}>11</Text>
            <Text style={{fontSize:30, height:50 }}>12</Text>
            <Text style={{fontSize:30, height:50 }}>13</Text>
            <Text style={{fontSize:30, height:50 }}>14</Text>
            <Text style={{fontSize:30, height:50 }}>15</Text>
            <Text style={{fontSize:30, height:50 }}>16</Text>
            <Text style={{fontSize:30, height:50 }}>17</Text>
            <Text style={{fontSize:30, height:50 }}>18</Text>
            <Text style={{fontSize:30, height:50 }}>19</Text>
            <Text style={{fontSize:30, height:50 }}>20</Text>


              <View style={{height:50, width:'100%', backgroundColor: 'red'}}>
                <Text>Button</Text>
              </View>

            <Text style={{fontSize:30, height:50 }}>1</Text>
            <Text style={{fontSize:30, height:50 }}>2</Text>
            <Text style={{fontSize:30, height:50 }}>3</Text>
            <Text style={{fontSize:30, height:50 }}>4</Text>
            <Text style={{fontSize:30, height:50 }}>5</Text>
            <Text style={{fontSize:30, height:50 }}>6</Text>
            <Text style={{fontSize:30, height:50 }}>7</Text>
            <Text style={{fontSize:30, height:50 }}>8</Text>
            <Text style={{fontSize:30, height:50 }}>9</Text>
            <Text style={{fontSize:30, height:50 }}>10</Text>
            <Text style={{fontSize:30, height:50 }}>11</Text>
            <Text style={{fontSize:30, height:50 }}>12</Text>
            <Text style={{fontSize:30, height:50 }}>13</Text>
            <Text style={{fontSize:30, height:50 }}>14</Text>
            <Text style={{fontSize:30, height:50 }}>15</Text>
            <Text style={{fontSize:30, height:50 }}>16</Text>
            <Text style={{fontSize:30, height:50 }}>17</Text>
            <Text style={{fontSize:30, height:50 }}>18</Text>
            <Text style={{fontSize:30, height:50 }}>19</Text>
            <Text style={{fontSize:30, height:50 }}>20</Text>
            <Text style={{fontSize:30, height:50 }}>1</Text>
            <Text style={{fontSize:30, height:50 }}>2</Text>
            <Text style={{fontSize:30, height:50 }}>3</Text>
            <Text style={{fontSize:30, height:50 }}>4</Text>
            <Text style={{fontSize:30, height:50 }}>5</Text>
            <Text style={{fontSize:30, height:50 }}>6</Text>
            <Text style={{fontSize:30, height:50 }}>7</Text>
            <Text style={{fontSize:30, height:50 }}>8</Text>
            <Text style={{fontSize:30, height:50 }}>9</Text>
            <Text style={{fontSize:30, height:50 }}>10</Text>
            <Text style={{fontSize:30, height:50 }}>11</Text>
            <Text style={{fontSize:30, height:50 }}>12</Text>
            <Text style={{fontSize:30, height:50 }}>13</Text>
            <Text style={{fontSize:30, height:50 }}>14</Text>
            <Text style={{fontSize:30, height:50 }}>15</Text>
            <Text style={{fontSize:30, height:50 }}>16</Text>
            <Text style={{fontSize:30, height:50 }}>17</Text>
            <Text style={{fontSize:30, height:50 }}>18</Text>
            <Text style={{fontSize:30, height:50 }}>19</Text>
            <Text style={{fontSize:30, height:50 }}>20</Text>
            <Text style={{fontSize:30, height:50 }}>1</Text>
            <Text style={{fontSize:30, height:50 }}>2</Text>
            <Text style={{fontSize:30, height:50 }}>3</Text>
            <Text style={{fontSize:30, height:50 }}>4</Text>
            <Text style={{fontSize:30, height:50 }}>5</Text>
            <Text style={{fontSize:30, height:50 }}>6</Text>
            <Text style={{fontSize:30, height:50 }}>7</Text>
            <Text style={{fontSize:30, height:50 }}>8</Text>
            <Text style={{fontSize:30, height:50 }}>9</Text>
            <Text style={{fontSize:30, height:50 }}>10</Text>
            <Text style={{fontSize:30, height:50 }}>11</Text>
            <Text style={{fontSize:30, height:50 }}>12</Text>
            <Text style={{fontSize:30, height:50 }}>13</Text>
            <Text style={{fontSize:30, height:50 }}>14</Text>
            <Text style={{fontSize:30, height:50 }}>15</Text>
            <Text style={{fontSize:30, height:50 }}>16</Text>
            <Text style={{fontSize:30, height:50 }}>17</Text>
            <Text style={{fontSize:30, height:50 }}>18</Text>
            <Text style={{fontSize:30, height:50 }}>19</Text>
            <Text style={{fontSize:30, height:50 }}>20</Text>

          </View>


           </ScrollView>

            {this.state.visible==true?
              <View style={{height:50, width:'100%', backgroundColor: 'red', position:'absolute', bottom:0}}>
                <Text>Button</Text>
            </View>:null}



        </View>


    );
  }
}

【讨论】：

谢谢你的回答，我明白了它背后的逻辑。但是由于数据的长度是不可预测的，我不想在计算高度时实现它。是否可以检查视图中的按钮是否已向上滚动或可见？
你可以借助这个库>>>>>>>>>> github.com/yamill/react-native-inviewport
感谢您的回复。我试一试，让你知道。
我尝试使用 inviewport，但出现错误，因此我也尝试了替代方案，但对我来说没有任何效果。你能在你的零食上给我看一下吗
您必须根据滚动视图中的内容计算高度...您必须编写自己的逻辑来确定它