web-dev-qa-db-fra.com

La couleur d'arrière-plan devient noire après OnPress, lorsqu'elle est affichée en haut de FlatList

Comportement très étrange, j'utilise un FlatList, et en plus il y a 2 boutons flottants (TouchableOpacity) (position absolue) et quand ils sont pressés, leur couleur de fond devient noire. Cela se produit uniquement sur IOS.

enter image description hereenter image description here

Code:

Rendu 

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
  }
})

Ce que j'ai essayé:

-Réglage des sous-couches de couleur pour effacer, sans succès.

-Ajout de différentes couches sous, sans succès.

-Cela ne se produit que lorsqu'il est affiché sur une liste, cela se produit également avec ListView.

ioslistviewreact-nativereact-native-flatlist
16
MCMatan

Veuillez utiliser TouchableOpacity au lieu de TouchableHighlight

TouchableHighlight Mettez en surbrillance l'arrière-plan lorsque vous cliquez sur

21
Nisarg Thakkar

essayez ceci dans vos accessoires TouchableOpacity

underlayColor="#ffffff00"
12
Sadik anass

Essayez d'ajouter ceci <TouchableHighlight underlayColor='none' />

8
Israel Hernández Alfaro

Enveloppez View avec <TouchableHighlight underlayColor="#fff">

0
Oduola Olumide Sunday