javascript - 单击时 react-native-material-dropdown 动画的问题

Question

我最近将 react-native-material-dropdown 添加到我的 React Native 应用程序中，我觉得它是一个很棒的库，但文档有时不清楚。

当我将这个库实现到我的代码中时，我遇到了这个问题，点击我的下拉菜单的动画坏了。

我查看了代码，下拉菜单应该是 TouchableWithoutFeedback，所以我想知道为什么我有这种小故障的视觉效果。

编辑:当我实现 renderBase 时，视觉效果看起来很糟糕，但如果我不这样做，我只能看到一个更小的视觉问题，即动画的阴影脱离了按钮一点点。

这是它的样子:

我的实现如下

import { Dropdown } from 'react-native-material-dropdown'

<DropdownView>
  <Dropdown
    containerStyle={styles.containerStyle}
    data={data}
    fontSize={hp('2.7%')}
    inputContainerStyle={styles.inputContainerStyle}
    itemCount={5}
    itemTextStyle={styles.itemTextStyle}
    labelExtractor={({ value, icon }) =>
      renderCheckboxRow(value, icon)
    }
    onChangeText={text => setCountryCode(text)}
    renderBase={({ value }) => renderCheckbox(value)}
    value={countryCode}
    valueExtractor={({ value }) => pickCountryCode(value)}
  />
</DropdownView>

renderCheckbox 返回这个

 <BaseCheckboxView>
    <Image source={icon} />
    <BaseCheckboxText>{value}</BaseCheckboxText>
  </BaseCheckboxView>

我的风格

const BaseCheckboxView = styled.View`
  align-items: center;
  flex-direction: row;
  justify-content: center;
  width: ${hp('16%')};
`

const Image = styled.Image``

const BaseCheckboxText = styled.Text`
  color: #000;
  font-family: 'Baloo-Regular';
  font-size: ${hp('4%')};
  margin-left: ${wp('2%')};
`

有什么线索吗？

Answer 1

我在更改 dropdownOffset 后遇到了类似的问题:

dropdownOffset={{top: 0, left: 0}}

在那之后，“波纹”效果不对齐，我通过像这样更改 rippleInsets 属性来修复它:

rippleInsets={{top: 0, bottom: 0, right: 0, left: 0}}

rippleInsets 的文档仅暗示 top 和 bottom 属性，但我的 typescript 提示该对象也缺少 left 和 right 属性。

希望这对您有所帮助!