当React Native中的一个视图位于另一个视图的顶部时，任何点击或按下功能都将停止工作

Question

我有一个位于另一个View之上的View，在上面的View上有一个给定的TouchableOpacity，但它不起作用。

以下是我的代码：

return (
<View style={{ flex: 1 }}>
<View style={styles.backContainer}>
<View style={styles.backContainerPadded}>
<View style={styles.topView}>
<View style={styles.topViewFormView}>
<TouchableOpacity onPress={() => { navigation.navigate("ChefRegistrationScreen") }}>
<View style={styles.continueContainer}>
<Text style={styles.continueText}>CONTINUE</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View style={styles.bottomView}>
</View>
</View>
);

样式：

const styles = StyleSheet.create({
backContainer: {
flex: 9,
backgroundColor: "#F6FCF2"
},
bottomView: {
flex: 2,
backgroundColor: "#7DBC53",
zIndex: -1,
},
backContainerPadded: {
flex: 1,
paddingHorizontal: SizeConfig.blockWidth * 4,
},
topView: { flex: 4 },
topViewFormView: {
flex: 8,
backgroundColor: "#fff",
marginBottom: SizeConfig.blockHeight * -14,
zIndex: 1,
elevation: 10,
justifyContent: "flex-end"
},
continueContainer: {
flex: 1,
backgroundColor: "#000",
justifyContent: "center",
alignItems: "center",
padding: SizeConfig.blockHeight * 2
},
continueText: { color: "#FFFFFF" }
})

如果我在topViewFormView中将justifyContent: "flex-end"更改为justifyContent: "flex-start"，这将使CONTINUE转到不与另一个视图重叠的屏幕，但一旦到达与View重叠的位置，则TouchableOpacity停止工作。我无法解决这个问题。。！！

Answer 1

尝试使用这些属性

topViewFormView: {
// flex: 8,
position:"absolute",
// backgroundColor: "#fff",
// marginBottom: 50 * -14,
// zIndex: 10,
elevation: 10,
justifyContent: "flex-end",
bottom:0 
},