Expo / React Native WebView，动画中的onPress事件在Android上不起作用答案

【问题标题】：Expo / React Native WebView, onPress Event within Animation Not Working on AndroidExpo / React Native WebView，动画中的onPress事件在Android上不起作用
【发布时间】：2021-02-18 10:18:21
【问题描述】：

好的，所以使用带有 WebView 组件和动画 (ScaleX) 的覆盖原生组件（Expo Snack 中的红色框）的 Expo。

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，然后单击红色框。

【问题讨论】：

标签： android reactjs react-native webview expo

【解决方案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>

【讨论】：