react-native - react native :Dropdown is overlapping with the below content in ios

Question

我在我的 React native 应用程序中使用下拉选择器，它在 Android 设备上工作正常，但 UI 在 iOS 上中断

代码

import React, { Component } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import DropdownPicker from '../DropdownPicker';
import { Platform } from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import Icon from 'react-native-vector-icons/Feather';
export default class RadioButton extends Component {
state = {
value: null,
selectedPicker: null,
picker: 'No Minimum Duration',
itemsA: [
{ label: 'Owner for this place', value: 'opt1' },
{ label: 'France', value: 'france' },
{ label: 'Germany', value: 'germany' }
],
};
onChangeItem = (value, name) => {


}
onselectHandler = (value) => {
this.setState({
selectedPicker: value
})

}
componentDidMount() {



}

componentDidUpdate(prevProps, prevState) {


if (prevState.value !== this.state.value) {
switch (this.state.value) {
case 'No Minimum Duration':
break;
case 'Hour':
this.setState({
itemsA: [
{ label: '1 Hour', value: 1 },
{ label: '2 Hours', value: 2 },
{ label: '3 Hours', value: 3 },
{ label: '4 Hours', value: 4 },
{ label: '5 Hours', value: 5 },
{ label: '6 Hours', value: 6 },
{ label: '7 Hours', value: 7 },
{ label: '8 Hours', value: 8 },
{ label: '9 Hours', value: 9 },
{ label: '10 Hours', value: 10 },
{ label: '12 Hours', value: 12 },

]
})
break;
case 'Day':
this.setState({
itemsA: [
{ label: '1 Day', value: 1 },
{ label: '2 Days', value: 2 },
{ label: '3 Days', value: 3 },
{ label: '4 Days', value: 4 },
{ label: '5 Days', value: 5 },
{ label: '6 Days', value: 6 },
{ label: '7 Days', value: 7 },

]
})
break;
case 'Week':
this.setState({
itemsA: [
{ label: '1 Week', value: 1 },
{ label: '2 Weeks', value: 2 },
{ label: '3 Weeks', value: 3 },
{ label: '4 Weeks', value: 4 },
]
})
break;
case 'Month':
this.setState({
itemsA: [
{ label: '1 month', value: 1 },
{ label: '2 month', value: 2 },
{ label: '3 month', value: 3 },
{ label: '6 month', value: 6 },
]
})
break;
}
}

}

render() {
const { PROP } = this.props;
const { value } = this.state;


return (
<View>
{PROP.map(res => {

return (
<View key={res.key}>

<View style={styles.container}>

<TouchableOpacity
style={[value === res.key ? styles.radioCircleActive : styles.radioCircle]}
onPress={() => {

this.props.setRadioValue(res.key.toLowerCase())
this.setState({
value: res.key,
})

}}>
{value === res.key && <View style={styles.selectedRb} />}
</TouchableOpacity>
<Text style={styles.radioText}>{res.text}</Text>
</View>
{
value === res.key && res.key != 'No Minimum Duration' && !this.props.isHidedrpdwn ?

// <DropdownPicker

// items={this.state.itemsA}
// defaultValue={this.state.itemA}
// onselectHandler={this.onselectHandler}
// onChangeItem={value => this.props.setValue(value.value)}

// name='relation'

// />
<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 }}
style={{ backgroundColor: '#fafafa' }}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{ backgroundColor: '#fafafa' }}
onChangeItem={item => this.setState({
country: item.value
})}
/> : null
}
</View>
);
})}
{/ <Text> Selected: {this.state.value} </Text> /}
</View>
);
}
}

此代码在 android 上运行良好，但 UI 在 ios 上中断， 屏幕截图附在上面。这只发生在 ios 上。 下拉菜单与下面的内容重叠。我该如何解决这个问题？ .

Answer 1

将 zIndex:100 属性连同 Platform.OS === 'ios' 一起添加到 ios 的选择器父 View 样式中。使用 Platform.OS，因为 zIndex 在 android 中不能正常工作，它会导致下拉列表出现问题。