背景顏色在OnPress後變爲黑色，當顯示在FlatList上時

非常奇怪的行爲，我使用的是FlatList，在它上面有2個浮動按鈕（TouchableOpacity）（絕對位置），當它們被按下時，它們背景顏色變黑。這隻發生在IOS上。背景顏色在OnPress後變爲黑色，當顯示在FlatList上時

代碼：

渲染

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之間。

來源

2017-08-28 MCMatan

請使用TouchableOpacity代替TouchableHighlight

TouchableHighlight突出的背景，當你點擊

來源

2017-08-28 14:20:24

我曾經嘗試都，開始與TouchableOpacity，同樣的情況.. – MCMatan

試試這個在您的TouchableOpacity道具

underlayColor="#ffffff00"

來源

2017-09-05 02:13:44

背景顏色在OnPress後變爲黑色，當顯示在FlatList上時

回答

相關問題