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

Question

无法在 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>

css:

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 视图上显示按钮？

Answer 1

解决方法很简单，把Button View的代码under/after放到WebView的代码

<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>

如果由于某种原因你不能把它放在 WebView 下，添加一个比 WebView 更高的 elevation 样式道具，以及 zIndex 样式道具将适合你。

Answer 2

那是因为 zIndex 属性在 Android 上完全损坏（参见 the dedicated issues）。为了对此进行补偿，您必须反转容器子项的呈现顺序。

这可以通过在之后呈现 WebView:

按钮来完成

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

或者通过颠倒容器中的显示顺序，使用 flexDirection:

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

请注意，您还可以使用 android 特定的 elevation API。这将充当可靠的 z-index，并且是在 Android.

上显示阴影的唯一方法

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

How to display floating button over webview on android

android

android-webview

reactjs

react-native