React Native - “绝对”位置和“zIndex”不适用于Android

Question

我正在构建一个反应本机应用程序。我有一个圆形图像，上面有文字，用户可以点击它转到另一个页面。

这在 iOS 上效果很好，但是在 Android 上我无法点击。当我在 Android 上检查并单击时，我作为父级TouchableHighlight的appBody视图似乎就是被单击的视图。我剥离了整个页面并删除了appBody仅保留的内容TouchableHighlight，但仍然不会点击 Android 手机。

我注意到一旦我absolute从viewTextWrap它移除位置然后触发点击！但是，如果没有绝对位置，则Test文本和背景颜色位于图像后面。我正在使用 zIndex 读取绝对位置导致 Android 上的问题，并通过使用elevation. 所以我在任何地方Zindex添加了相同的elevation，但仍然不起作用。

这是我的代码：

<View style={globalStyle.appBody}>
    <TouchableHighlight style={{zIndex: 100, elevation: 100}} onPress={() => this._goToPage('Test')} underlayColor={'transparent'}>
        <View style={styles.ImageWrap}>
            <Image style={[globalStyle.ProfileImage, { top: -90 }]} source={{ uri: this.state.pic }} defaultSource={require('../../assets/images/placeholder.png')} />
            <Image style={styles.viewImage} source={require('../../assets/images/test.png')} />
            <View style={styles.viewTextWrap}>
                <Text style={styles.viewText}>Test</Text>
            </View>
        </View>
    </TouchableHighlight>

    //More code in the body here

</View>

以及这些类的 css：

appBody: {
    backgroundColor: '#fff',
    padding: 25,
    height: '100%'
},
ImageWrap: {
    position: 'relative',
    backgroundColor: '#fff',
},
ProfileImage: {
    position: "absolute",
    zIndex: 100,
    top: -68,
    height: 136,
    width: 136,
    borderRadius: 136 / 2,
    alignSelf: 'center',
},
viewImage: {
    position: "absolute",
    zIndex: 100,
    elevation: 100, //Tried adding to match zIndez
    alignSelf: 'center',
    bottom: -50,
},
viewTextWrap: {
    position: "absolute", //If I remove this, the click works but the text is behind the image
    zIndex: 101,
    elevation: 101, //Tried adding to match zIndez
    alignSelf: 'center',
    bottom: -32,
},
viewText: {
    position: 'relative',
    fontSize: 12,
    textAlign: "center",
},

Answer 1

您可以使用 ImageBackground 组件，而不是使 viewTextWrap 的位置绝对，以便文本 viewTextWrap 不会位于图像后面。