ios - 当显示在 FlatList 顶部时，OnPress 后背景颜色变为黑色

Question

非常奇怪的行为，我正在使用 FlatList，在它上面有 2 个 float 按钮 (TouchableOpacity)(绝对位置)，当它们被按下时，他们的背景颜色变成黑色。这仅发生在 IOS 上。

代码:

渲染

let content = (
  <CollapsableNavList
    onListScroll={this.showOrHideFilterButtons}
    showFilterButtonsOnScroll={this.showOrHideFilterButtons}
    style={styles.list}
    isHorizontal={false}
    dataModel={this.props.isFetching ? this.props.whileFetchingDisplayedResults : this.props.dataModel}
    isFetching={false}
    onRowSelect={this._onRowSelect}
    didScrollWithOffset={this.didScrollWithOffset}
    renderRowContent={this.renderRowContent}
    keyExtractor={(item) => {
      if (this.props.isFetching) {
        return item
      }
      const property = item
      return property.propertyId
    }}
  >
    {header}
  </CollapsableNavList>
)

return (
  <View style={[styles.container, styles.relative]}>
    <View style={styles.filterBtnBlock}>
      <AdditionalSearchParamsButton

        title='Map'
        iconName='map'
        onPress={this.onMapPress}
      />
    </View>
    {content}
  </View>
)


export default class AdditionalSearchParamsButton extends Component {
  // Prop type warnings
  static propTypes = {
    iconName: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    onPress: PropTypes.func.isRequired
  }

  render () {
    const { iconName, title, onPress } = this.props
    return (
      <View>
        <TouchableHighlight onPress={onPress} underlayColor={Colors.clear}>
          <View style={styles.innerContainer}>
            <McIcon
              name={iconName}
              style={styles.additionalPropsIcon}
          />
            <Text style={styles.additionalPropsText}>{title}</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }
}

export default StyleSheet.create({
  container: {
    height: 50,
    width: 150,
    alignItems: 'center',
    justifyContent: 'center'
  },
  innerContainer: {
    height: 36,
    width: 126,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.snow,
    borderRadius: 18,
    elevation: 2,
    shadowOffset: {width: 0, height: 2},
    shadowColor: 'black',
    shadowOpacity: 0.3,
    marginBottom: 5,
  },
  additionalPropsBtn: {
    height: 36,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: Colors.snow
  },
  additionalPropsText: {
    ...Fonts.style.bigTitle,
    color: Colors.blue,
    paddingLeft: 10
  },
  additionalPropsIcon: {
    fontSize: 22,
    color: Colors.blue
  }
})

我尝试过的:

-将底层颜色设置为透明，但没有成功。

-在下面添加不同的图层，没有成功。

-这仅在显示在列表中时发生，ListView 也会发生。

Answer 1

请使用 TouchableOpacity 而不是 TouchableHighlight

TouchableHighlight 点击时高亮背景