3

我正在使用这个库来显示下拉选择器选项。当我在没有 FlatList 的情况下使用它时它工作正常（附截图）

但是当我在 FlatList 视图中使用它时，选择器的子视图落后于下一个 FlatList 行的视图（附截图）

我还尝试按 Desc 顺序使用 zIndex 作为选择器。

我已经很长时间遇到这个问题并且没有得到任何东西来使事情发生。

事情怎么解决？在 UI 中显示下拉子项的任何其他方式并且它是可选择的？此下拉列表的正常视图

孩子们躲在下面FlatList 子内容

每个 FlastList 子项的渲染代码如下所示，

<View >
                <Card style={{ elevation: 10, margin: 7 }}>

                     <Card.Content style={{ backgroundColor: '#B5DBF7' }}>
                          <View style={{ marginTop: 3, }}>

                               <View style={{ paddingLeft: 10 }}>
                                    <Text style={{ color: CONSTANTS.COLOR.BASE_COLOR, fontSize: 18, fontWeight: 'bold' }}>{item.text}</Text>
                                    <View style={{ marginTop: 10, width: '100%', height: 1.5, backgroundColor: CONSTANTS.COLOR.BASE_COLOR }}></View>
                                    <Text style={{ fontSize: 14, marginTop: 3 }}>This will be descriptive text for notification of the user. Dummy data is being showing now.</Text>


                               </View>

                               <DropDownPicker
                                    items={[
                                         { label: 'USA', value: 'usa', icon: () => <Icon name="flag" size={18} color="#900" />, hidden: true },
                                         { label: 'UK', value: 'uk', icon: () => <Icon name="flag" size={18} color="#900" /> },
                                         { label: 'France', value: 'france', icon: () => <Icon name="flag" size={18} color="#900" /> },
                                    ]}
                                    // defaultValue={this.state.country}
                                    containerStyle={{ height: 40 }}
                                    childrenContainerStyle={{
                                         height: 1030
                                     }}
                                    style={{ backgroundColor: '#fafafa', zIndex: index_value - index, position: 'relative'}}
                                    itemStyle={{
                                         justifyContent: 'flex-start'
                                    }}
                                    dropDownStyle={{ backgroundColor: '#fafafa', height: 100, }}
                                    onChangeItem={item => this.setState({
                                         country: item.value
                                    })}
                               />
                          </View>
                          
                     </Card.Content>
                </Card>
           </View>
4

0 回答 0