React Native-“绝对”位置和“ zIndex”在Android上不起作用

问题描述

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

这在iOS上效果很好，但是在Android上我无法点击。当我在Android上进行检查并单击TouchableHighlight时，似乎单击的是父级的appBody视图。我剥离了整个页面，并删除了appBody，只留下了TouchableHighlight，但仍然无法在Android手机上点击。

我注意到从absolute移除viewtextwrap位置后立即触发了点击！但是，如果没有绝对位置，Test文本和背景色将位于图像后面。我正在使用Android上的zIndex原因问题读取绝对位置，并使用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",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,bottom: -32,viewText: {
    position: 'relative',fontSize: 12,textAlign: "center",

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）