如何在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視圖按鈕？

來源

2017-10-16 aharo vishinsky

的解決方案是非常簡單的，把按鈕查看代碼下/後 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樣式道具也適合你。

來源

2017-10-16 14:28:55

非常感謝你（：）你能向我解釋爲什麼它的工作在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上顯示陰影的唯一方式。

來源

2017-10-16 14:35:04 bend

謝謝你（... –

如何在android上的webview上顯示浮動按鈕android

回答

相關問題