zyslife / react-native-head-tab-view Goto Github PK

可能描述不是很清楚 可以看视频

视频地址：
http://guangguang.kuaifaka.com/goods/picture/20200909/1000180_1599616734_0_0_907.mp4?imageMogr2/auto-orient/format/webp/ignore-error/1

Hi

I use FlatList wrapped into HPageViewHoc

and looks like testID props has been lost, can you take a look and provide it?

头部点击与滑动不能并存，头疼~

请问下作者的rn的版本是多少，我的版本是0.57的使用后报TypeError:addListener is not a function

Right now you can slide left on the first tab and slide right on the last tab, it will do nothing but bounce horizontally.

It would be nice to have an option to lock the sliding on those directions of the respective tabs(the locked props on TabView will lock all directions)

可能描述不是很清楚 看视频

视频地址：
http://guangguang.kuaifaka.com/goods/picture/20200909/1000180_1599616734_0_0_907.mp4?imageMogr2/auto-orient/format/webp/ignore-error/1

HPageViewHoc 217行报错

return WrappedComponent.prototype.hasOwnProperty(scrollName)

ScrollView.prototype undefined

环境
"react": "16.13.1", "react-native": "0.63.2",

header是个轮播图就只能自动轮播而不能用户手动滑动了？请问有解决方案吗

不知道能不能修复，谢谢先。

我已经把headerRespond设置为true，可是当我往上滑头部一直在原地不会变小

目前一个screen里最外面就是一个 tab-view ，请问有办法实现下拉刷新吗？ 谢谢

当从列表向上滑动到头部区域， 当列表在滚动缓冲时， 再次触摸头部区域， 要使其列表立刻停止滚动。就像单纯当列表一样，这块还需要处理。

安卓版有安装 @react-native-community/viewpager组件，打开就报错
Tried to register two views with the same name RNCViewPager

谢谢

HFlatList使用Scroll监听滚动行为出现Tabbar固定和renderScrollHeader固定
导致FlastList向上滑动时 头部和Tabbar固定在原处

npm install @react-native-community/viewpager --save
这一步建议在README里仿照其他rn库说明添加手动导入说明(或者引导去看@react-native-community/viewpager github README的导入说明)

以及针对安卓端下使用@react-native-community/viewpager版本, 做个说明, :
2.x版本是用的Android support可用于rn0.59以下版本
3.x版本是用的AndroidX的, 可用于rn0.60以上版本

目前SegmentTabBar的样式不支持自定义

现象：有个需求是在tab右侧添加一个排序按钮。我添加renderRightView后，tab滑动到了Index = 1，但是位置1的tab并没有进入高亮状态。去掉renderRightView，一切正常

Hello bro!

Thanks for providing such a cool component. I've already created something for my personal goals in my previous project but didn't share it. Now I wanted to find out something already written - to not copy and paste this from other my app and found your solution.

If you are not going to merge it into the react-native-tab-view project, so please think about good docs/readme in English.

例如，上面header是一个播放器，当播放器播放的时候，我不让tab进行上下滚动

定位代码：

tabs里嵌套flatlist,flatlist每个item有点击事件，左右滑动的时候会触发点击事件，这个怎么解决

您好，用了您的框架后报错了。
TypeError: Cannot read property 'scrollTo' of null
请问怎么解决？

Android 是可以的

子页面里面的列表滑动到第2页或者n页, 通过哪个方法回到顶部?

1.更新了最新版本
2.使用下拉onStartRefresh
当我下拉刷新时感觉会顿卡 iPhone 6P

大佬，请问我使用的 简例的例子后

import { HPageViewHoc, TabView } from 'react-native-head-tab-view'

_renderScene = (sceneProps: { item: string, index: number }) => {
        const { item } = sceneProps;
        if (item == 'ScrollView') {
            return <Page1 {...sceneProps} />
        } else if (item == 'FlatList') {
            return <Page2 {...sceneProps} />
        } else if (item == 'SectionList') {
            return <Page3 {...sceneProps} />
        }
        return null;
}
    
render() {
        return (
            <View style={{ flex: 1, backgroundColor: '#FFF' }}>
                <StatusBar
                    barStyle={'dark-content'}
                    translucent={true}
                />
                {this._renderNavBar()}
                <TabView
                        tabs={this.state.tabs}
                        renderScene={this._renderScene}
                        makeHeaderHeight={() => { return 180 }}
                        renderScrollHeader={()=><View style={{height:180,backgroundColor:'red'}}/>}
                        onChangeTab={this.onChangeTab}
                    />
            </View>
        )
    }

如何去掉 Tabbar 下划线或者更改下划线样式呢

我试了以下方案
1、onScroll去监听 不用自带的刷新功能 使用自定义 ios能监听到负值 也就是到顶部了还可以继续下拉可以做到自定义刷新 但是Android不可以 最多到顶部就不能下拉了 只能监听到0 结论 ios可以 安卓不行

2、 添加手势监听滑动距离，使用rn自带手势:结论 不行手势功能只能监听到几个值就会被scrollview的滑动所替换;
使用第三方手势控件，可以做到监听任何时候的滑动坐标以及距离，但是tab左右切换受到影响，不能左右滑动了，如果能解决左右滑动的问题，估计能实现。

3、因为rn自带的刷新控件，不支持修改样式，没有暴露原生的全部方法，这里Android的刷新控件有一个方法是修改距离顶部的高度的，所以考虑封装原生自定义控件。 不过不懂原生， 搞了一半实在是不懂了

Only the top ~100 px receives a touch event. If I have a button at y = 20px, it is clickable. If the button is at y = 150px, it is not clickable, UNTIL I scroll up so that button is within around the top 100px area.

Looks like the HPageView has a transparent area covering the header? I tried increasing zIndex of the header but it still doesn't work. I'll take a look at the source code if I get the time too, but maybe you know why this is happening?

如何监听整体的下滑事件？

代码如下

<TabView
        tabs={['aaa', 'bbb']}
        underLineHidden={true}
        renderScene={_renderScene}
        headerRespond={false}
        makeHeaderHeight={() => { return 220 }}
        tabsContainerStyle={{
          marginHorizontal: 15,
          borderColor: '#14AC69',
          borderWidth: 1,
          alignItems: 'center',
          paddingVertical: 10,
          borderTopLeftRadius: 10,
          borderBottomLeftRadius: 10,
          borderTopRightRadius: 10,
          borderBottomRightRadius: 10,
        }}
        tabbarStyle={{
          // borderBottomWidth: 0,
        }}
        activeTextStyle={{
          fontSize: 20,
          backgroundColor: '#14AC69',
        }}
        underLineHidden={true}
        inactiveTextStyle={{ fontSize: 20, backgroundColor: '#333', }}
        renderScrollHeader={() => (
          <View>
            <View style={styles.listHeader}>
              <Text>统计日期: 2020-06-16</Text>
              <IconFont
                name="message"
                size={20}
                onPress={() => navigation.navigate('SaleNormDescription')} />
            </View>
            <WhiteSpace />
            <WingBlank>
              <InfoCard
                tipName='销售监控'
                monthTarget={12878666.66}
                yearTarget={12878666.66} />
            </WingBlank>
          </View>
        )}
        onChangeTab={onChangeTab}
      />

代码如上, 添加underLineHidden={true} 等 tabbar 属性后都无效.

TabView.tsx中加上这段代码
不然iphone 11 +的设备，状态栏会有head内容展示

老哥，啥时候能添加头部和列表整体下拉功能？感觉现在的这种下拉不是很常用。

如何给 整体tabview添加下拉控件?就像scrollview添加 refreshContrl那样，并且支持下拉回调

gif 图太大了, 传到cdn 了, https://imgs.wuazhu.cn/imgs/Kapture%202020-06-28%20at%2017.58.50_quaL8n.gif

问题: 如何固定滚动的生效区域, 就是我看 demo 的下拉加载都是在 tabbar 以下开始, 我的菊花都是从页面顶部开始, 这个是否跟 makeHeaderHeight 设置有关? 另一个页面的makeHeaderHeight是 200, 但是加载也是从页面顶部开始.

另一个是会产生连带滚动, 并且需要再次拖动才能回到原位

代码如下:

<TabView
      tabs={tabs}
      makeHeaderHeight={() => 44}
      activeTextStyle={{ color: '#333', fontSize: 22, fontWeight: '900' }}
      inactiveTextStyle={{ color: '#999', fontSize: 22, }}
      averageTab={false}
      renderScene={_renderScene}
      renderTabBar={(tabbarProps) => (
        <Tabbar
          {...tabbarProps}
          underLineHidden={true}
          style={{ borderBottomWidth: 0, }}
        />
      )}
      renderScrollHeader={() => <SearchInput style={{ height: 44 }} />}>
    </TabView>

Is there a function to switch tab programmatically? Passing index or name as the parameter.

能导出类似ScrollView onRefresh的事件吗

hello

i'd like to do something when header is disappeared because i scroll up.

so i tried to use onScroll function in HPageViewHoc(FlatList) to get scroll value. but it was duplicated.

is there way to detect the moment or get scroll value of HPageViewHoc(FlatList)?

please help me!!

当tab切换页只有少量数据时。切换页面后样式错乱。在安卓手机（华为）手机在tab首页整个页面无法滑动。麻烦请大佬看一下。 @zyslife

First thank you for your work.

I noticed you force the bounces property to false

Is there a reason in particular? Can we override this in any way?

Same question for showsVerticalScrollIndicator