React Native 中scrollview滑动不到底部的解决方案一

今天在做项目的时间遇到了一个问题:

我的底部菜单栏用的是react-native-scrollable-tab-view,上面用的是scrollview,android底部显示不全,ios正常:

如下图所示:


我的解决方案是:

在scrollview的内部子项目最后一项添加一个空的view设置一个高度:

   <ScrollView contentContainerStyle={styles.container} showsVerticalScrollIndicator={false} >
           <Touchable url={'tel:18585025253'} title={'电话热线:18585025253'} />
           <Touchable url={'mailto:674668211@qq.com'} title={'发送邮件:674668211@qq.com'} />
           <Touchable url={'http://www.baidu.com'} title={'打开http网页'} />
           <Touchable url={'https://www.baidu.com'} title={'打开https网页'} />
           <Touchable url={'smsto:18585025253'} title={'发送短信'} />

           <TouchableOpacity style={styles.quit}>
             <Text style={{color:'red'}}>退出</Text>
           </TouchableOpacity>
             <View style={{height:Platform.OS == 'ios' ? 0:30,}}></View>
          </ScrollView>

这样在android和ios上都能正常显示,出现的原因应该是

react-native-scrollable-tab-view的底部和上面的view之间的的布局出现了问题。


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React Native,当一个ScrollView嵌套在另一个ScrollView时,子ScrollView默认是不可以滑动的。为了让子ScrollView可以滑动,需要在父ScrollView的onTouchStart、onTouchMove和onTouchEnd事件对事件进行处理。 具体来说,可以在父ScrollView的onTouchStart事件记录下当前手指的位置,然后在onTouchMove事件判断当前手指的位置是否在子ScrollView的范围内,如果是,则将事件交给子ScrollView处理;如果不是,则将事件交给父ScrollView处理。在onTouchEnd事件,可以清除掉已经记录的手指位置信息。 以下是一个示例代码: ``` import React, { Component } from 'react'; import { ScrollView, View } from 'react-native'; class ParentScrollView extends Component { constructor(props) { super(props); this.state = { isChildScrolling: false, childScrollTop: 0, }; } handleChildScroll = (event) => { const { contentOffset } = event.nativeEvent; this.setState({ childScrollTop: contentOffset.y, }); } handleTouchStart = (event) => { const { locationY } = event.nativeEvent; if (locationY > this.state.childScrollTop) { this.setState({ isChildScrolling: true, }); } } handleTouchMove = (event) => { const { locationY } = event.nativeEvent; if (this.state.isChildScrolling) { this.childScrollView.scrollTo({ y: locationY - this.state.childScrollTop }); } } handleTouchEnd = () => { this.setState({ isChildScrolling: false, childScrollTop: 0, }); } render() { return ( <ScrollView onTouchStart={this.handleTouchStart} onTouchMove={this.handleTouchMove} onTouchEnd={this.handleTouchEnd} > <View style={{ height: 200 }}> <ScrollView ref={(ref) => { this.childScrollView = ref; }} onScroll={this.handleChildScroll} > {/* 子ScrollView内容 */} </ScrollView> </View> {/* 父ScrollView的其他内容 */} </ScrollView> ); } } export default ParentScrollView; ``` 在上面的代码,首先在父ScrollView的state记录了一个isChildScrolling和childScrollTop变量,分别表示子ScrollView是否正在滑动,以及子ScrollView的当前scrollTop值。然后在父ScrollView的onTouchStart事件,根据手指位置是否在子ScrollView的范围内,来判断是否将事件交给子ScrollView处理。在onTouchMove事件,如果子ScrollView正在滑动,则通过scrollTo方法来滑动ScrollView。在onTouchEnd事件,清除掉记录的变量信息。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值