如何在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代碼放在 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之下，則可以在WebIndex下方添加一個比WebView更高的海拔樣式道具，以及zIndex樣式道具。

Answer 2

這是因為zIndex屬性在Android上已被破壞（請參閱專用問題 ）。 為了補償它，您必須反轉容器子級的渲染順序。

這可以通過在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索引，並且是在Android上顯示陰影的唯一方法。