Expo / React Native WebView，动画中的 onPress 事件无法正常工作 Android

Question

好的，所以将 Expo 与 WebView 组件和动画 (ScaleX) 的覆盖本机组件（Expo Snack 中的红色框）一起使用。

代码在 iOS 上运行完美，但在 android 模拟器或设备上运行不正常。它改为在网页 javascript.

中执行 HTML/WebView onclick 处理程序

移除动画组件后，它也适用于 Android。

这是已知问题吗？我该如何解决？

onPress={()=>alert()}

世博小吃https://snack.expo.io/@psquizzle/webview-example

import React, { Component, useEffect, useState , useRef} from 'react';
import { WebView } from 'react-native-webview';
import { View, Text, TouchableOpacity, Image, Animated} from 'react-native';

const SpeakerButton = props => {
  const [fadeAnim] = useState(new Animated.Value(0)); // Initial value for opacity: 0

  React.useEffect(() => {
    if(props.show){
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 500,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 0,
        useNativeDriver: true,
      }).start();
    }

  }, [props.show]);

  return (
    <Animated.View 
      widthValue={parseFloat(fadeAnim*60)}
      style={{
        ...props.style,
        transform: [
          
          {  scaleX: fadeAnim } 
        ] , 
      }}
      
      >
      {props.children}
    </Animated.View>
  );
};

export default function App() {
  const initialHTMLContent = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.addEventListener("click", function(){
  alert("Hello World");
});</script>
</head>
<body>
<h1>Hello</h1>
<my-component source-url="/api/video/v1/us-west-2.893648527354.channel.DmumNckWFTqz.m3u8"></my-component>
</body>
</html>`;

  return (
    <View
      style={{
        flex: 1,
      }}>
      <WebView
        originWhitelist={['*']}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{
          html: initialHTMLContent,
          baseUrl: 'https://hotels.yourroom.eu',
        }}
      />

        <SpeakerButton show={true} >
               <TouchableOpacity onPress={()=>alert('Hello Back')}
             style={{display:'flex', alignItems:'center',justifyContent:'center', position:'absolute', bottom:250, right:-5,zIndex:20,  backgroundColor:'red',width:60,height:50, borderRadius:10, shadowColor: '#0000008e',
           shadowOffset: { width: 5, height: 5 },
            shadowOpacity: 0.8,
           shadowRadius: 5,  
             elevation: 5}}>
                <Image style={{ height:30, width:30, tintColor:'white', marginRight:5}} ></Image>
             </TouchableOpacity>
             </SpeakerButton>
    </View>
  );
}

如有任何帮助，我们将不胜感激。

查看问题运行在Adroid Emulator模式下点击Expo Snack红框

Answer 1

因此 android 上的 CSS 样式渲染似乎是一个问题，只是将 cess 移至父元素，现在它的行为符合预期。

     <SpeakerButton show={true}  style={{display:'flex', alignItems:'center',justifyContent:'center', position:'absolute', bottom:250, right:-5,backgroundColor:'red',width:60,height:50, borderRadius:10, shadowColor: '#0000008e',
           shadowOffset: { width: 5, height: 5 },
            shadowOpacity: 0.8,
           shadowRadius: 5,  
             elevation: 5}} >
               <TouchableOpacity onPress={()=>alert('Hello Back')}
            >
                <Image  style={{ height:30, width:30, tintColor:'white', marginRight:5}} ></Image>
             </TouchableOpacity>
             </SpeakerButton>

Expo / React Native WebView，动画中的 onPress 事件无法正常工作 Android

Expo / React Native WebView, onPress Event within Animation Not Working on Android

android

webview

reactjs

react-native

expo