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

Posted

技术标签:

【中文标题】Expo / React Native WebView，动画中的onPress事件在Android上不起作用【英文标题】：Expo / React Native WebView, onPress Event within Animation Not Working on 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，然后单击红色框。

【问题讨论】：

【参考方案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上不起作用的主要内容，如果未能解决你的问题，请参考以下文章

使用 react-native (expo) 切换手电筒

React-native refs 和 Expo Camera

尝试在 create-react-native-app 项目 (expo) 中使用 react-native-fs

不使用 react-native 的 Expo 分支

React Native “Expo SDK 需要 Expo 才能运行......此代码未在 Expo 上运行。”

React-Native 和 Expo：create-react-native-app 和 react-native init 之间的区别