我正在尝试做一个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
}
})
最佳答案
我们在这里看不到您的样式，但看起来与您在链接问题中遇到的问题相同。elevation会覆盖zIndex，因此可以使您的按钮位于视图顶部，但由于React Native根据zIndex计算您的触摸并完全忽略了elevation-您的按钮位于顶部，但触摸实际上转到下方有较高zIndex的视图。如果我发生了同样的事情，我花了一天时间才意识到问题所在。
关于javascript - 适用于Android的React Native Interactable无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44670157/