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

问题描述：

无法在android上的webview上显示浮动按钮。 ios工作正常，在android上不显示。如何在android上的webview上显示浮动按钮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视图按钮？

答

的解决方案是非常简单的，把按钮查看代码下/后 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>

如果由于某种原因，你不能把它放在网页视图下，增加一个海拔风格道具比WebView更高，并且zIndex样式道具也适合你。

非常感谢你（：）你能向我解释为什么它的工作在Android上是这样的吗？ –

zIndex在android中相当麻烦，最好是以（反向）顺序编码，你希望元素出现，因为海拔会产生一些你可能不想在某些情况下产生的影子。 –

答

这是因为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索引，并且是在Android上显示阴影的唯一方式。

谢谢你（... –

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

相关推荐