如何在android上的webview上显示浮动按钮

无法在android上的webview上显示浮动按钮。 ios运行良好，android上没有显示

渲染功能：

         <View style={{ flex: 1}}>
        <View style={{position:'absolute',right:0,marginTop:90,marginRight:10,zIndex:1,height:50,width:50}}>
            <TouchableHighlight style={styles.addButton}
                                underlayColor='#ff7043' onPress={()=>{console.log('pressed')}}>
                <Text style={{fontSize: 50, color: 'black'}}>+</Text>
            </TouchableHighlight>
        </View>
        <WebView
            source={require('./index.html')}
            style={{marginTop:0}}
             scalesPageToFit={Platform.OS !== 'ios'}
            onMessage={this.onMessage}
            postMessage={"Hello from RN"}
        />
    </View>

const styles = StyleSheet.create({
    addButton: {
        backgroundColor: '#ff5722',
        borderColor: '#ff5722',
        borderWidth: 1,
        height: 100,
        width: 100,
        borderRadius: 50,
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        bottom: 20,
        right:20,
        shadowColor: "#000000",
        shadowOpacity: 0.8,
        shadowRadius: 2,
        shadowOffset: {
            height: 1,
            width: 0
        }
    }
});

---

如何在android上的web视图上显示按钮？

解决方案非常简单，将按钮视图代码放在web视图代码下/之后

<View style={{ flex: 1}}>
        <WebView
            source={require('./index.html')}
            style={{marginTop:0}}
             scalesPageToFit={Platform.OS !== 'ios'}
            onMessage={this.onMessage}
            postMessage={"Hello from RN"}
        />
        <View style={{position:'absolute',right:0,marginTop:90,marginRight:10,zIndex:1,height:50,width:50}}>
                <TouchableHighlight style={styles.addButton}
                                    underlayColor='#ff7043' onPress={()=>{console.log('pressed')}}>
                    <Text style={{fontSize: 50, color: 'black'}}>+</Text>
                </TouchableHighlight>
        </View>
</View>

{console.log（'pressed'）}>
+

---

如果由于某种原因您无法将其放在WebView下，那么在zIndex样式的道具旁边添加一个高于WebView的立面样式道具将对您起作用。

这是因为Android上的

zIndex

属性被完全破坏（请参阅）。为了补偿它，必须反转容器子对象的渲染顺序

这可以通过在

WebView

之后呈现按钮来完成：

<View style={{ flex: 1 }}>
    <WebView />
    <View style={{ styles.button }} />
</View>

---

请注意，您还可以使用特定于android的。这将作为一个可靠的z索引，并且是在Android上显示阴影的唯一方式。

非常感谢（：你能向我解释一下为什么它在Android上是这样工作的吗？zIndex在Android上有很多错误，最好用相反的方式编码。）您希望元素出现的顺序，因为在某些情况下，立面会产生您不希望出现的阴影。

<View style={{ flex: 1, flexDirection: 'column-reverse' }}>
    <View style={{ styles.button }} />
    <WebView />
</View>