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

【问题标题】：Background color turns black after OnPress, when displayed on top of FlatListOnPress 后背景颜色变为黑色，当显示在 FlatList 顶部时
【发布时间】：2018-02-05 20:07:12
【问题描述】：

非常奇怪的行为，我使用的是FlatList，上面有2个浮动按钮（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 也会发生。

【问题讨论】：

标签： ios listview react-native react-native-flatlist

【解决方案1】：

我已经使用带有背景颜色的 activeOpacity 解决了这个问题

<TouchableOpacity activeOpacity={1} backgroundColor="#FFF"></TouchableOpacity>

您可以使用自己的背景颜色

【讨论】：

或使用activeOpacity={0.5} 为用户的选择提供反馈，这是标准的，至少在 iOS 上是这样。

【解决方案2】：

用<TouchableHighlight underlayColor="#fff">包裹View

【讨论】：

【解决方案3】：

尝试添加此<TouchableHighlight underlayColor='none' />

【讨论】：

请围绕这个答案分享一些废话。
@JenniferGoncalves 我认为不需要“过长”的描述

【解决方案4】：

在你的 TouchableOpacity 道具中试试这个

underlayColor="#ffffff00"

【讨论】：

anw，那是什么颜色？
它是一种以 rgba Hex 编码的不可见白色，前 6 位数字定义颜色，后两位数字是不透明度，因此任何以 00 结尾的 rgba 颜色，例如 #fe123400 或 #00000000 或 # 44556600...会产生同样的效果。

【解决方案5】：

请使用TouchableOpacity 而不是TouchableHighlight

TouchableHighlight点击时高亮背景

【讨论】：