React原生手势通过前视图传递到后视图

Question

我试图使一个react native应用程序中，我有两个视图。一幅为后方(absolute)视图。

我使用onStartShouldSetResponder来检测前视图外的点击，我想隐藏登录状态。但是这个手势通过前视图传递到后视图。这意味着login_component(下面)的点击也传递给login_container(下面)，并隐藏视图。

这是我的代码，

<View onStartShouldSetResponder={() => true}
onResponderRelease={() => this.setState({ showLogin: false })}
style={styles.login_container}
>
<View onStartShouldSetResponder={() => false}
style={styles.login_component}
>
<Text>Join a room</Text>
</View>
</View>

这是我的样式代码，

const styles = StyleSheet.create({
login_component: {
justifyContent: "center",
alignItems: "center",
height: 200,
width: 300,
backgroundColor: "#F5FCFF",
margin: "auto",
borderRadius: 15,
},
login_container: {
position: "absolute",
height: "100%",
width: "100%",
backgroundColor: "rgba(0,0,0,0.7)",
justifyContent: "center",
alignItems: "center",
},
});

你知道怎么解决这个问题吗?

这是我正在做的一个预览- https://i.stack.imgur.com/sFz1q.png

也欢迎任何替代解决方案。

谢谢

Answer 1

你可以试着设置一个高的" zindex ";您希望能够单击的JSX元素的CSS属性。高zIndex将确保元素位于之上。zIndex值较低的那个

在您的例子中，您需要您的"login_component"在"login_container"的顶部。所以您的JSX可以修改如下(未测试):

<View style={{...styles.login_container, zIndex: 99}}> // Lower zIndex (Below)
<View style={{...styles.login_component, zIndex: 999}}> // Higher zIndex (Above)
<Text>Join a room</Text>
</View>
</View>

通常你不必担心自己设置zIndex，但我猜'position: "absolute"属性已经影响了默认行为。

Answer 2

最后我得到了解决方案，这很简单，只是使用stopPropagation对login_component。

最终代码,

<View onStartShouldSetResponder={() => true}
onResponderRelease={() => this.setState({ showLogin: false })}
style={styles.login_container}
>
<View onStartShouldSetResponder={(e) => e.stopPropagation()}
style={styles.login_component}
>
<Text>Join a room</Text>
</View>
</View>