像flipkart一样，在react原生中使用粘性页脚。

问题描述 投票：0回答：1

我想开发一个可以向上滚动的粘性页脚。一旦UI的某些部分被滚动，那么页脚也可以向上移动，而UI的其他部分是可见的，就像Flipkart的产品详情页一样。

react-native user-interface sticky-footer
1个回答
1
投票
  1. 在底部创建一个粘性按钮
  2. 在srollview中获取元素滚动位置
  3. 获取屏幕高度
  4. 计算你的元素在滚动视图中可见的大致高度。
  5. 当你的元素可见时，隐藏粘性按钮。

工作实例。https:/snack.expo.io@msbot01playful-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>


    );
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.