我希望实现以下目标:

enter image description here

下面的图片是我现在可以做的,但这不是我想要的.

我现在拥有的代码示例:

renderA() {
    return (
        <View style={ position: 'absolute', zIndex: 0 }>    // parent of A
            <View style={ zIndex: 2 }>  // element A
            </View>
            <View style={ zIndex: 2 }>  // element A
            </View>
        </View>
    );
}

renderB() {
    return (
        <View style={ position: 'absolute', zIndex: 1 }>    // element B
        </View>
    );
}


render() {
    return (
        <View>
            {this.renderA()}
            {this.renderB()}
        </View>
    );
}

用语言来说,我想要

  • Parent A:比一切都低.
  • Element B:位于上述父级A,但低于元素A.
  • Element A:比一切都重要.

注意,Parent AElement B都必须是absolutely位,元件A和元件B都必须是clickable位...!

推荐答案

我最终通过创建第二个模仿B的对象来解决这个问题.

我的模式现在如下所示:

enter image description here

我现在有B1(在A的父级内)和B2(在A的父级外).

B1和B2紧挨着一个,所以在肉眼看来,它似乎只是一个物体.

React-native相关问答推荐

类似Snapchat的Reaction Native筛选器

无法解析 com.google.gms:google-services:4.3.15

将值从一个 js 文件传递​​到 react native 中的另一个 js 文件:react native

如何将 react-native 图像从 expo-image-picker 上传到使用 multer 的 Express.js 后端

如何在 react-native 中刷新 Flatlist 数据?

我们在react钩子中还需要功能性的 setState 方式吗?

react-native 自定义视图,原生 prop 没有 propType

React Native:在ScrollView中更改焦点时键盘关闭

在 TouchableOpacity 上创建 Raised凸起或Shadow阴影效果

使用 resizeMode 封面截断的图像

如何为我的 React Native Android 应用程序使用 Crashlytics?

Invariant Violation:requireNativeComponent: "RNCWebView" was not found in the UIManager

如何以编程方式在 react-native 中截屏

如何在 React Native 中本地存储不是字符串的数据

Firebase检测用户是否存在

修复错误:路由 'Home' 的组件必须是 React 组件

React Native localhost 另一个调试器已经连接

我将如何根据百分比为按钮的宽度设置动画,并且它的背景 colored颜色 也是如此?

react-native iOS 应用在部署后不显示静态/本地资源

如何将图形 API 与 react-native-fbsdk 一起使用?