React-Native 之 GD （十九）TabBarItem 逻辑完善 / 关闭筛选菜单滑动手势 / Navigator 掉帧卡顿问题处理...-优快云博客

1.TabBarItem 逻辑完善

那么为了更好的用户体验，我们这边还需要来处理一下点击 TabBarItem 的一下细节，那就是当用户点击 Item 时，可能只是单纯的想进行页面的切换或者置顶操作，而不想进行刷新，那么我们就需要来判断一下什么时候需要刷新，什么时候需要置顶。

那么我们可以通过判断 ListView 中的 Scroll 的偏移量来判断是否需要进行置顶操作，当偏移量大于 1 的时候我们就进行置顶操作，否则的话我们就进行刷新操作。

那么问题又来了，当我们执行刷新操作的时候，应该模拟用户下拉显示滚动小菊花来告诉用户我们在进行刷新操作，可是 pullList 并没有提供我们这个方法怎么办？那我们就需要分析第三方框架的内容来找方法解决这个问题

GDHome.js

// 点击了Item
clickTabBarItem() {
    // // 打印组件
    // console.log(this.refs.pullList);
    // // 打印偏移量
    // console.log(this.refs.pullList.scroll.scrollProperties.offset);

    let PullList = this.refs.pullList;

    if (PullList.scroll.scrollProperties.offset > 0) {      // 不在顶部
        // 一键置顶
        PullList.scrollTo({y:0});
    }else {     // 在顶部

        // 执行下拉刷新动画
        PullList.state.pullPan = new Animated.ValueXY({x: 0, y: this.topIndicatorHeight * -1});

        // 加载最新数据
        this.loadData();

        // 关闭动画
        setTimeout(() => {
            PullList.resetDefaultXYHandler();
        },1000);
    }
}

2.关闭筛选菜单滑动手势

那这边我们的筛选菜单还有个问题，就是可以响应我们的手势进行滚动，这样肯定是不对的，那么我们需要关闭这个手势的监听，使这个菜单不能滚动，具体操作如下：

GDCommunalSiftMenu.js

render() {
    return(
        <TouchableOpacity
            onPress={() => this.popToHome(false)}
            activeOpacity={1} // 不透明
        >
            <View style={styles.container}>
                {/* 菜单内容 */}
                <ListView
                    scrollEnabled={false}                           // 设置禁止滚动
                    dataSource={this.state.dataSource}              // 设置数据源
                    renderRow={this.renderRow.bind(this)}           // 根据数据初始化 Cell
                    contentContainerStyle={styles.contentViewStyle} // 内容样式
                    initialListSize={16}                            // 一次性渲染几行数据
                />
            </View>
        </TouchableOpacity>
    )
}

3.Navigator 掉帧卡顿问题处理

到现在肯定有很多朋友发现 Navigator 跳转动画并不是那么流畅，会出现掉帧卡顿的现象，并不像 NavigatorIOS 那么丝丝顺滑；造成这个的原因是因为 NavigatorIOS 是在 UI线程执行的动画操作，而 Navigator 是在 js线程执行的动画，那这样就会阻塞住 JS线程，那么怎么去解决这个问题？这边提供 2 种方案：

第一种：使用 navigation 框架，这个是目前替代 navigator 最好的方案之一，很强大，很流畅，但是需要再去学习一下使用。

第二种：如果你懒得学习上面的框架，那么这边再给各位提供另一种方法 —— 使用官方提供的 API：InteractionManager（可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证JavaScript动画的流畅运行），这边我们就使用这种方案来进行一下优化：

// 跳转到搜索页面
pushToSearch() {
    InteractionManager.runAfterInteractions(() => {
        this.props.navigator.push({
            component: Search,
        });
    });
}