Я реализую свой собственный нативный выпадающий список для ios & android. Компонент имеет scrollView (раскрывающиеся опции), который открывается при нажатии компонента.
«Развернутый» компонент отлично работает для iOS, но не для Android. На android раскрывающийся раскрывающийся список обычно расширяется, но его нельзя коснуться.
Компонент базового представления раскрывающегося списка находится в представлении с position: absolute
, я пытался использовать z-index: 10
& elevation: 10
, но ничего не работает. Я не думаю, что я должен использовать или z-index или повышение. Я думаю, что это может быть ошибка в самой реакции реагировать.
Вот мой выпадающий компонент:
return (
<BaseContainer>
<SelectedContainer onPress={toggleDropdown}>
<SelectedText>{props.default}</SelectedText>
{openDropdown ? (
<DropdownContainer>
{props.items.map((item, index) => (
<DropDownItem
key={item.id}
onPress={onSelectItem.bind(this, { item, index })}
/>
))}
</DropdownContainer>
) : null}
</SelectedContainer>
</BaseContainer>
);
};```
```const BaseContainer = styled.View`
width: 37%;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const SelectedContainer = styled.TouchableOpacity`
width: 70%;
height: 100%;
flex-direction: row;
justify-content: center;
align-items: center;
`;
const SelectedText = styled.Text`
font-size: 10;
color: ${colors.secondary};
`;
const DropdownContainer = styled.ScrollView`
width: 100%;
height: 230px;
position: absolute;
top: 100;
left: 0;
`;```