web-dev-qa-db-ja.com

OnListの後、FlatListの上に表示すると、背景色が黒くなる

非常に奇妙な動作です。私はFlatListを使用しています。その上に2つのフローティングボタン（TouchableOpacity）（絶対位置）があり、それらを押すと、背景色が黒に変わります。これはIOSでのみ発生します。

enter image description hereenter image description here

コード：

レンダリング

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でも発生します。

ioslistviewreact-nativereact-native-flatlist
16
MCMatan

TouchableOpacityの代わりにTouchableHighlightを使用してください

TouchableHighlightクリックすると背景が強調表示されます

21
Nisarg Thakkar

touchableOpacityプロップでこれを試してください

underlayColor="#ffffff00"
12
Sadik anass

これを追加してみてください<TouchableHighlight underlayColor='none' />

8
Israel Hernández Alfaro

Viewを<TouchableHighlight underlayColor="#fff">で囲む

0
Oduola Olumide Sunday