反应本机浮动操作按钮可触摸不起作用

Question

我在屏幕上有一个平面列表和FAB。FAB定位为绝对。 每当我尝试点击 FAB 时，fab后面的平面列表项目都会被点击。

当我删除绝对 FAB 工作的位置时，我尝试在视图中包装可触摸，也尝试更改视图顺序，但没有任何效果

附加屏幕截图

注意：它适用于 iOS，但不适用于 Android

import React from "react";
import {
View,
Text,
FlatList,
StyleSheet,
Platform,
Image,
TouchableOpacity
} from "react-native";
import RF from "react-native-responsive-fontsize";
import {
widthPercentageToDP as wp,
heightPercentageToDP as hp
} from "react-native-responsive-screen";
import AddIcon from "../../libs/fabActions/AddIcon";
export default class TemplateScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
};
}
keyExtractor = (item, index) => {
return index.toString();
};
renderItem = ({ item, index }) => {
const { navigate } = this.props.navigation;
return (
<TouchableOpacity>
<View style={styles.item}>
<Text style={styles.name}>Christmas Template</Text>
</View>
</TouchableOpacity>
);
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<FlatList
contentContainerStyle={styles.list}
data={this.state.data}
extraData={this.state}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
/>
<TouchableOpacity>
<View style={styles.addButton}>
<AddIcon width={wp(4)} height={wp(4)} />
</View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f0f2ff"
},
item: {
backgroundColor: "#ffffff",
marginHorizontal: "4%",
marginVertical: "1.2%",
paddingHorizontal: "4.5%",
paddingVertical: "5%",
...Platform.select({
ios: {
shadowColor: "rgba(71, 75, 165, 0.1)",
shadowOffset: {
width: 0,
height: 1
},
shadowRadius: 9.7,
shadowOpacity: 1
},
android: {
elevation: 1
}
})
},
name: {
fontSize: RF(2.3),
color: "#474ba5"
},
addButton: {
position: "absolute",
bottom: 20,
right: 30,
width: 46,
height: 46,
backgroundColor: "#ffffff",
borderRadius: 46,
alignContent: "center",
justifyContent: "center",
zIndex: 10,
...Platform.select({
ios: {
shadowColor: "rgba(71, 75, 165, 0.1)",
shadowOffset: {
width: 0,
height: 1
},
shadowRadius: 9.7,
shadowOpacity: 1
},
android: {
elevation: 4
}
})
},
list: {
paddingBottom: hp(8),
paddingTop: "2%"
}
});

Answer 1

要理解的是，在Android中，如果绝对定位的按钮在其父级之外，它将不会捕获事件。您可以通过制作正方形视图来验证此假设，并以这样一种方式浮动按钮，即其中一半在该视图之外，另一半位于视图内部。当您单击父视图中的一半时，事件将触发;但是，如果您单击父视图之外的一半，它将不起作用。

因此，结论是始终确保按钮位于父视图中。 在浮动操作按钮的情况下，如果您希望它工作，则需要将其连接到屏幕的根视图，或者换句话说，它应该是屏幕根视图的直接子视图。 当然，你也会让它成为最后一个孩子，以免被隐藏。 这样你就会确保它始终在父视图中。 另一件需要注意的事情是，如果您在Android Studio中创建一个项目，例如制作本机应用程序，并且选择带有浮动操作按钮的选项，您将看到FAB是ConstraintLayout容器的直接子级，该容器验证了我在这里所说的内容。

在问题中提供的情况下，需要定位的可触摸不透明度绝对不是其中的视图