引言

使用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,这样在滚动的时候就有实现了粘性效果;

代码如下:

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

style={

[cityStyle.sectionItemStyle,

{backgroundColor: this.state.isTouchDown ? touchDownBGColor : touchUpBGColor}]

}>

{item.key}

});

return (

ref="sectionItemView"

onStartShouldSetResponder={() => true}

onMoveShouldSetResponder={() => true}

onResponderTerminationRequest={() => true}

onResponderGrant={this.responderGrant}

onResponderMove={this.responderMove}

onResponderRelease={this.responderRelease}

>

{sectionItem}

);

}

这里的几个方法需要具体说明一下(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的效果

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)

}