像 flipkart 一样反应本机的粘性页脚

Question

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

Answer 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>


    );
  }
}

像 flipkart 一样反应本机的粘性页脚

Sticky footer in react native like flipkart

user-interface

sticky-footer

react-native