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

Posted 2023-02-16

【中文标题】OnPress 后背景颜色变为黑色，当显示在 FlatList 顶部时

【英文标题】：Background color turns black after OnPress, when displayed on top of 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 也会发生。

【参考方案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点击时高亮背景