加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react native仿企查查地区下拉

发布时间:2020-12-15 16:17:00 所属栏目:百科 来源:网络整理
导读:只写了2级,三级同理 { /* 筛选地区 */ } View style={[{backgroundColor: ‘pink‘,height: 300,flexDirection: ‘row‘,},]} View style={{width: ‘40%‘}} // 这里是一级地区(省) ScrollView contentContainerStyle={{width: ‘100%‘,backgroundColor

只写了2级,三级同理

  {/*筛选地区*/}
                            <View style={[{backgroundColor: ‘pink‘,height: 300,flexDirection: ‘row‘,},]}>
                                <View style={{width: ‘40%‘}}>
                      // 这里是一级地区(省) <ScrollView contentContainerStyle={{width: ‘100%‘,backgroundColor: ‘orange‘}}> { area.map((val,i) => { return ( <TouchableWithoutFeedback onPress={() => this.clickArea(val,i)}>
                                  //这里的index是用来做选中后的样式 <View style={[{backgroundColor: this.state.index === i ? ‘#eee‘ : ‘#fff‘}]}> <View style={{padding: 10,borderBottomColor: ‘#eee‘,borderBottomWidth: 1 / PixelRatio.get()}}> <Text style={{fontSize: 13,color: ‘#333‘}}>{val.title}</Text> </View> </View> </TouchableWithoutFeedback> ) }) } </ScrollView> </View>                     // 这里是二级地区(市) <ScrollView> {
                        // 这里的this.state.index是点击一级地区的时候将其索引传给函数给state中的index赋值,索引这个index就是一级地区的索引 area[
this.state.index].lists.map((item,k) => { return ( <TouchableWithoutFeedback onPress={() => this.secClickArea(item,k)}> <View style={{backgroundColor: ‘#eee‘}}> <View style={[{padding: 8,borderBottomColor: ‘#fcfcfc‘,borderBottomWidth: 1 / PixelRatio.get()},styles.flex]}> <Text style={{fontSize: 13,color: ‘#666‘}}>{item}</Text> </View> </View> </TouchableWithoutFeedback> ) }) } </ScrollView>                    // 三级可以写这里,然后点击二级的时候将二级点击的索引传给函数给state中的值,然后再放这里即可 </View>

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读