react native仿企查查地区下拉

只写了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>

                              

 

转载于:https://www.cnblogs.com/lude1994/p/11102188.html