在 Android 中向网络视图或相机添加叠加层

Question

Consider the following, minimal JSX example for react-native:

<WebView style={{flex:1, backgroundColor: '#FF0000'}}>

  <View style={{position: 'absolute', width: 30, height: 30, left: 10, top: 10, backgroundColor: '#0000FF'}}>

  </View>

</WebView>

Run on iOS or the Android emulator, this will show a blue rectangle on the red WebView . On my Android devices, the blue rectangle won't show up.

Is this a general limitation of the way controls work in Android or is there a way to make this rectangle show up on actual Android devices? Currently I don't have any clue on how to debug this issue ...

Replacing the WebView with a simple View , this will work on Android devices as well.

Answer 1

This will solve your problem.

Use RelativeLayout with 2 views in it one overlay and other one web view.Both view will overlap each other. And you will get the effect you want to have.

<RelativeLayout>
   <WebView>
    //here webview
   </Webview>
   <ImageView>
    //here the overlay
   <ImagView>
</RelativeLayout>