ReactNative实现城市选择列表

作者: Villa__Mou | 来源:发表于2019-06-18 11:03 被阅读12次

    引言

    使用RN开发了一段时间,最近遇到了一个比较棘手的问题,就是用react写个城市选择列表,当然这个如果用Android原生来写,网上的例子数不胜数,随便就能找到,但是react却很少,也没有一个和我这个需求相匹配的,所以就只能自己动手撸一个出来咯.

    效果

    这个城市列表和其他的有点区别

    1,有当前定位城市
    2,有热门城市
    3,每个子项是一个类似GridView的效果,而不是ListView
    实现的效果图如下:

    aa.gif

    实现步骤

    • 首先需要一个city.json的json文件
      例:
    {
        "key": "A",
        "data": [{
          "citys": [
            {
              "city": "阿拉善盟",
              "id": 152900
            },
            {
              "city": "鞍山",
              "id": 210300
            },
            {
              "city": "安庆",
              "id": 340800
            },
            {
              "city": "安阳",
              "id": 410500
            },
    
      .....]
      }
    
    • 整个列表采用sectionList
      SectionList提供了粘性的header,设置为true即可stickySectionHeadersEnabled=true,这样在滚动的时候就有实现了粘性效果;

    代码如下:

                        <SectionList
                            ref="sectionList"
                            renderSectionHeader={this.renderSectionHeader}
                            renderItem={this.renderItem}
                            stickySectionHeadersEnabled={true}
                            showsHorizontalScrollIndicator={false}
                            sections={this.state.sections}
                            keyExtractor={this._extraUniqueKey}
                        />
    
    • 右边采用ScrollView来实现,最开始采用View,发现会有事件抢夺问题,具体的原因不祥,毕竟我对RN的事件传递也不是特别熟
      代码如下:
      /*右侧索引*/
        sectionItemView() {
            const sectionItem = this.state.sections.map((item, index) => {
                if (index === 0) {
                    return null
                }
                return <Text key={index}
                             style={
                                 [cityStyle.sectionItemStyle,
                                     {backgroundColor: this.state.isTouchDown ? touchDownBGColor : touchUpBGColor}]
                             }>
                    {item.key}
                </Text>
            });
    
            return (
                <ScrollView style={cityStyle.sectionItemViewStyle}
                            ref="sectionItemView"
                            onStartShouldSetResponder={() => true} 
                            onMoveShouldSetResponder={() => true}
                            onResponderTerminationRequest={() => true}
                            onResponderGrant={this.responderGrant}
                            onResponderMove={this.responderMove} 
                            onResponderRelease={this.responderRelease}
                >
                    {sectionItem}
                </ScrollView>
    
            );
        }
    

    这里的几个方法需要具体说明一下(React Native手势响应,就和android的onTouchEvent一个意思):
    通过实施正确的处理方法,视图可以成为接触响应器。有两种方法来询问视图是否想成为响应器:

    • View.props.onStartShouldSetResponder: (evt) => true,——这个视图是否在触摸开始时想成为响应器?
    • View.props.onMoveShouldSetResponder: (evt) => true,——当视图不是响应器时,该指令被在视图上移动的触摸调用:这个视图想“声明”触摸响应吗?
      如果视图返回 true 并且想成为响应器,那么下述的情况之一就会发生:
    • View.props.onResponderGrant:(evt)= > { } ——视图现在正在响应触摸事件。这个时候要高亮标明并显示给用户正在发生的事情。
    • View.props.onResponderReject:(evt)= > { }——当前有其他的东西成为响应器并且没有释放它。
      如果视图正在响应,那么可以调用以下处理程序:
    • View.props.onResponderMove:(evt)= > { }——用户正移动他们的手指
    • View.props.onResponderRelease:(evt)= > { }——在触摸最后被引发,即“touchUp”
    • View.props.onResponderTerminationRequest:(evt)= >true——其他的东西想成为响应器。这种视图应该释放应答吗?返回 true 就是允许释放

    事件处理:

    
        /*用户手指开始触摸*/
        responderGrant(event) {
            this.scrollSectionList(event);
            this.setState({
                isTouchDown: true,
            })
        }
    
        /*用户手指在屏幕上移动手指,没有停下也没有离开*/
        responderMove(event) {
            console.log("responderMove")
            this.scrollSectionList(event);
            this.setState({
                isTouchDown: true,
            })
        }
    
        /*用户手指离开屏幕*/
        responderRelease(event) {
            console.log("onTouchUp")
            this.setState({
                isTouchDown: false,
            })
        }
     /*手指滑动,触发事件*/
        scrollSectionList(event) {
            const touch = event.nativeEvent.touches[0];
            // 手指滑动范围 从 A-Q  范围从50 到 50 + sectionItemHeight * cities.length
            if (touch.pageY  >= sectionTopBottomHeight+headerHeight+statusHeight
                && touch.pageY <= statusHeight +headerHeight+sectionTopBottomHeight + sectionItemHeight * 25
                && touch.pageX >= width - sectionWidth
                && touch.pageX <= width
            ) {
                console.log("touchx" + touch.pageX + '.=======touchY' + touch.pageY)
                const index = (touch.pageY - sectionTopBottomHeight - headerHeight) / sectionItemHeight;
                console.log("index" + index);
                if (Math.round(index)>=0&&Math.round(index)<=25){
                    this.setState({
                        selectText: this.state.sections[Math.round(index)].key
                    })
                    //默认跳转到 第 index 个section  的第 1 个 item
                    this.refs.sectionList.scrollToLocation({
                        animated: true,
                        sectionIndex: Math.round(index),
                        itemIndex: 0,
                        viewOffset: headerHeight
                    });
                }
    
            }
        }
    

    这里根据手指在右边索引栏的滑动事件,获取到当前的x轴和y轴的具体值,然后计算出具体的子项目的标题,让SectionList滚动到具体的index位置;

    • 子项目列表采用FlatList实现GridView的效果
     <FlatList
                        data={info.section.data[0].citys}
                        horizontal={false}
                        numColumns={4}
                        showsHorizontalScrollIndicator={false}
                        renderItem={({item}) => this._createItem(item)}
                        keyExtractor={this._extraUniqueKey2}
                    />
    

    这样基本大体的效果就实现了

    最后

    React native实现这个有个很坑爹的地方,就是渲染列表会花费很长的时间,Android是这样,ios没试过,所以如果没有渲染完就去滑动索引栏会报这个scrolltoindex-should-be-used-in-conjunction-with-getitemlayout-or-on异常,网上找了很多资料,说是SectionList没有渲染完就调用scrollToLocation,如果要在没有渲染完之前调用scrollToLocation需要配合getitemlayout使用,但是这个getitemlayout又需要传入具体item的高度,然而我的FlatList的高度是不确定的,所以就很坑爹了,找不到办法解决,只能延时加载右边索引栏;
    代码如下:

       componentDidMount() {
            setTimeout(() => {
                this.setState({
                    canTouch: true
                })
            }, 1600)
        }
    

    这样全部基本就完成了
    项目地址:
    https://github.com/mouxuefei/RN-CitySectionList

    相关文章

      网友评论

        本文标题:ReactNative实现城市选择列表

        本文链接:https://www.haomeiwen.com/subject/ncixqctx.html