Question

我试图做workaround for this issue，如果interactable.view按下到屏幕顶部，则按钮不会呈现，如果它按到屏幕底部，那么使用onSnap：

的Interactable.View属性呈现按钮

代码：

    <Interactable.View
      style={{
        height: Screen.height,
        width: '100%',
        zIndex: 19,
        backgroundColor: '#222222',
        position: 'absolute',
        padding: 20
      }}
      onSnap={(e) => {
        if(e.nativeEvent.index === 2) {
          this.setState({showButton: false})
        } else {
          this.setState({showButton: true})
        }
      }}
      boundaries={{ top: 0, bounce: 0.5 }}
      verticalOnly={true}
      snapPoints={[
        { y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85, damping: 0.7 },
        { y: (Platform.OS === 'ios') ? Screen.height - 190 : Screen.height - 230, damping: 0.7 },
        { y: 0, damping: 0.7 }
      ]}
      initialPosition={{ x: 0, y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85 }}


      ref={view => this.interactableView2 = view}>

    </Interactable.View>

    {this.state.showButton &&
      <Button
        small
        icon
        ref={view => this.button1 = view}
        style={mapStyle.toggleMenuButton}
        onPress={() => {
          this.interactableView.snapTo({ index: 0 })
          this.props.onToggleMenuClick()
          this.props.setSelectedShop({ id: -1 })
          this.props.updateSearchResults({ products: [] })
        }}>
        <Icon name="sliders" size={20} color="#FFFFFF" />
      </Button>
    }

它可以在iOS和Android上运行它以某种方式阻止Interactable.View甚至移动到顶部，按钮只是失去了它的图标，变得无法点击。控制台中未显示任何错误。

为什么Android出现如此错误的想法？

编辑：以下按钮的样式应该消失：

export default {
  toggleMenuButton: {
    top: 30,
    left: 10,
    width: 50,
    position: 'absolute',
    zIndex: 5,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#FF3B3F',
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowRadius: 1,
    shadowOpacity: 1.0
  }
}

编辑：完整代码：

Map.js

import {
  StyleSheet,
  View,
  Text,
  FlatList,
  TouchableHighlight,
  Dimensions,
  Platform,
  //findNodeHandle,
  Image
} from 'react-native'
import React, { Component } from 'react'
import MapView from 'react-native-maps'
import { connect } from 'react-redux'
import {
  Button,
  Container
} from 'native-base'

import { updateRegion } from './map.action'
import Icon from 'react-native-vector-icons/FontAwesome'
import { toggleMenu } from '../search-page/searchPage.action'
import mapStyle from './style'
import Interactable from 'react-native-interactable'
import { setSelectedShop } from '../search-results/searchResults.action'
import { updateHeight } from '../search-results/searchResultsPresenter.action'
import { getSelectedProduct } from './markers.selector'
import { updateSearchResults } from '../search-page/searchPage.action'
//import { BlurView } from 'react-native-blur'


const Screen = {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height
}

const mapStateToProps = (state) => ({
  region: state.get('map').get('region'),
  markers: state.get('searchResults').get('products'),
  selectedProduct: getSelectedProduct(state)
})

const mapDispatchToProps = (dispatch) => ({
  onRegionChange: (region) => {
    dispatch(updateRegion(region))
  },
  updateSearchResults: (results) => {
    dispatch(updateSearchResults(results))
  },
  onToggleMenuClick: () => {
    dispatch(toggleMenu())
  },
  setSelectedShop: id => {
    dispatch(setSelectedShop(id))
  },
  updateHeight: height => {
    dispatch(updateHeight(height))
  }
})

class Map extends Component {

  constructor(props) {
    super(props)
    //this.state = { viewRef: null }
  }

  componentDidMount() {
    const { store } = this.context
    this.unsubscribe = store.subscribe(() => { })
    //this.setState({ viewRef: findNodeHandle(this.viewToBlur) })
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  interactableView;
  interactableView2;

  render() {
    return (
      <Container>
        <MapView
          style={styles.map}
          region={this.props.region}
          onRegionChangeComplete={this.props.onRegionChange}>
          {
            this.props.markers.map(marker => {
              return (
                <MapView.Marker
                  coordinate={marker.shop.coordinate}
                  title={marker.shop.name}
                  identifier={marker.shop.id.toString()}
                  onPress={e => {
                    console.log(e.nativeEvent)
                    this.interactableView.snapTo({ index: 1 })
                    this.props.setSelectedShop(marker.shop)
                    console.log(this.props.selectedProduct)
                  }}
                />
              )
            })
          }
        </MapView>

//********************************************************************//
                 the button
//********************************************************************//

        <Button
          small
          icon
          style={mapStyle.toggleMenuButton}
          onPress={() => {
            this.interactableView.snapTo({ index: 0 })
            this.props.onToggleMenuClick()
            this.props.setSelectedShop({ id: -1 })
            this.props.updateSearchResults({ products: [] })
          }}>
          <Icon name="sliders" size={20} color="#FFFFFF" />
        </Button>

//********************************************************************//
                 the interactable.view
//********************************************************************//

        <Interactable.View
          style={{
            height: Screen.height,
            width: '100%',
            zIndex: 19,
            backgroundColor: '#222222',
            position: 'absolute',
            borderRadius: 10,
            padding: 20
          }}
          boundaries={{ top: 0, bounce: 0.5 }}
          verticalOnly={true}
          snapPoints={[
            { y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85, damping: 0.7 },
            { y: (Platform.OS === 'ios') ? Screen.height - 190 : Screen.height - 230, damping: 0.7 },
            { y: 0, damping: 0.7 }
          ]}
          initialPosition={{ x: 0, y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85 }}


          ref={view => this.interactableView2 = view}>

          </Interactable.View>


        <Interactable.View
          style={{
            height: Screen.height,
            width: '100%',
            zIndex: 20,
            backgroundColor: '#222222',
            borderRadius: 10,
            padding: 20
          }}
          boundaries={{ top: 0, bounce: 0.5 }}
          verticalOnly={true}
          snapPoints={[{ y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85, damping: 0.7 },
          { y: (Platform.OS === 'ios') ? Screen.height - 190 : Screen.height - 230, damping: 0.7 }]}
          initialPosition={{ x: 0, y: (Platform.OS === 'ios') ? Screen.height - 55 : Screen.height - 85 }}
          ref={view => this.interactableView = view}>
          <View
            style={{ width: '100%', height: 200 }}>
            <Text
              style={{
                color: 'white',
                marginTop: (Platform.OS === 'ios') ? 0 : 2,
                marginBottom: (Platform.OS === 'ios') ? 20 : 25,
                textAlign: 'center',
                width: '100%'
              }}>
              {this.props.selectedProduct ? this.props.selectedProduct.shop.name : ''}
            </Text>
            {this.props.selectedProduct ? (
              <FlatList
                horizontal={true}
                style={{
                  height: 200
                }}
                data={this.props.selectedProduct ? this.props.selectedProduct.products : [{ name: '' }]}
                renderItem={({ item }) => {
                  return (
                    <TouchableHighlight onPress={() => this.interactableView2.snapTo({ index: 2 })}>
                      <View

                        //ref={x => this.viewToBlur = x}
                        style={{ width: 100, marginRight: 20 }}>
                        {/*<View style={{
                          borderWidth: 1,
                          borderColor: 'black',
                          margin: 0,
                          backgroundColor: 'red'
                        }} />*/}
                        {item.image ? (
                        <Image
                          style={{
                            width: 100,
                            height: 100,
                            zIndex: 45
                          }}
                          source={{ uri: item.image }}
                        />) : (
                          <Image
                          style={{
                            width: 100,
                            height: 100,
                            zIndex: 45
                          }}
                          source={ require('../add-page/noimage.png') }
                        />
                        )}

                        <Text style={{
                          color: 'white',
                          width: '100%',
                          textAlign: 'center'
                        }}>{item.name}</Text>
                      </View>

                    </TouchableHighlight>
                  )
                }} />) : <View />}
          </View>
          {/*<BlurView
            style={{
              position: 'absolute',
              top: 0,
              bottom: 0,
              left: 0,
              right: 0,
              borderWidth: 1,
              borderColor: 'black',
              zIndex: 60
            }}
            blurType="dark"
            viewRef={this.state.viewRef}
            blurAmount={20}
            blurRadius={20} />*/}
        </Interactable.View>
      </Container >
    )
  }
}



Map.contextTypes = {
  store: React.PropTypes.object
}

Map.propTypes = {
  region: React.PropTypes.shape({
    latitude: React.PropTypes.number,
    longitude: React.PropTypes.number,
    latitudeDelta: React.PropTypes.number,
    longitudeDelta: React.PropTypes.number
  }).isRequired,
  updateHeight: React.PropTypes.func,
  setSelectedShop: React.PropTypes.func,
  selectedProduct: React.PropTypes.object,
  onRegionChange: React.PropTypes.func.isRequired,
  onToggleMenuClick: React.PropTypes.func.isRequired,
  markers: React.PropTypes.array,
  updateSearchResults: React.PropTypes.func
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Map)

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 3
  }
})

Answer 1

我们在这里看不到您的风格，但它看起来与链接问题中的问题相同。

elevation会覆盖zIndex，因此它可以让您的按钮位于视图顶部，但由于React Native根据zIndex计算您的触摸并完全忽略{{1}您的按钮位于顶部，但触摸实际上会转到视图，其下方绘制的elevation更高。如果发生同样的事情，请花一天时间来了解问题所在。

React Native Interactable for Android无法正常工作

1 个答案: