打开后如何在视图顶部放置下拉菜单?

时间:2020-06-23 16:49:40

标签: javascript reactjs react-native

在本机反应中,我使用“ react-native-dropdown-picker”库进行下拉,问题是当我打开选择器时,它停留在下一个视图下,因此我决定使用zindex并进行管理要将选择器放置在下一个视图的顶部,问题是我无法单击任何选项,当我单击下拉菜单的任何选项时,触摸会在选择器下的视图中被识别。

以下代码是用于存储下拉菜单的工具栏组件的代码。

<View style={styles.toolbar}>
            <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',width:'100%'}}>
                <TouchableWithoutFeedback onPress={() => {props.toggleDrawer()}} >
                    <View style={styles.menu}>
                        <View style={styles.menuBar}/>
                        <View style={styles.menuBar}/>
                        <View style={styles.menuBar}/>
                    </View>
                </TouchableWithoutFeedback>
                    {logo}
            </View>
            <DropDownPicker
                        items={condominiumsList}
                        defaultValue={condominium}
                        containerStyle={{height: 45}}
                        style={styles.formBoxes}
                        labelStyle={{fontFamily:'segoeui4',fontSize:14,flex:1}}
                        dropDownStyle={styles.formBoxes}
                        onChangeItem={item=>{condominiumInputHandler(item.value)}}
                />
        </View>

这段代码显示了工具栏的使用位置及其下的视图:

<NavigationContainer>
          <View style={{...styles.default,...styles.marginTopPhone}}>  
            <ToolbarLogged toggleDrawer={()=>{navigation.toggleDrawer()}}
                idLang={(stringLang==strings_pt)?1:2} lang={stringLang}/> 
            <DrawerCustom.Navigator drawerContent={props => <DrawerContent langFile={stringLang} lang={(stringLang==strings_pt)? 1 : 0}  {...{...props}}/>}>
                <DrawerCustom.Screen name='Dashboard' component={makeLayout} initialParams={{ name: stringLang.dashboard}}/>
                <DrawerCustom.Screen name='Condominium' component={makeLayout} initialParams={{ name: stringLang.condominium}}/>
                <DrawerCustom.Screen name='Profile' component={makeLayout} initialParams={{ name: stringLang.profile}}/>
                <DrawerCustom.Screen name='Signout' component={Signout} />
            </DrawerCustom.Navigator>
          </View>
        </NavigationContainer>

makeLayout函数根据给定的名称param进行当前布局,并且如您所见,如果我不在工具栏的上方视图上使用zindex,则下拉列表将在makelayout函数给定的屏幕下加载,如果我使用zindex,则无法选择下拉菜单中的任何选项。

0 个答案:

没有答案