Question

好，因此将Expo与一个WebView组件和一个动画（ScaleX）叠加的本地组件（Expo Snack中的红色框）一起使用。

代码可以在iOS上完美运行，但不能在android模拟器或设备上运行。而是在网页javascript中执行HTML / WebView onclick处理程序。

删除动画组件后，它也可以在Android上运行。

这是一个已知问题还是如何纠正？

onPress = {（）=>警报（）}

博览会小吃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上不起作用

1 个答案: