在本机反应中,我使用“ 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,则无法选择下拉菜单中的任何选项。