在 Webview 中获取用户输入，React Native

Question

我在 web 视图中加载的网页需要音频输入，但 web 视图抛出“您的浏览器不支持 getUserMedia”错误。

import React, { useState, useEffect } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

const HeyComponent = ({ customKnowledgeBaseId }) => {
  const [dimensions, setDimensions] = useState(Dimensions.get('window'));

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setDimensions(window);
    });

    return () => subscription?.remove();
  }, []);

  const generateHtmlContent = (knowledgeBaseId) => {
    const baseUrl = 'example.com';
    const shareParams = `xyz`;
    const url = `example.com`;

    return `
      </html>
    `;
  };

  return (
    <View style={styles.container}>
      <WebView
        source={{ html: generateHtmlContent(customId) }}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        mixedContentMode="always"
        allowsInlineMediaPlayback={true}
        mediaPlaybackRequiresUserAction={false}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

export default HeyComponent;

请给出一个通用的解决方案，这是一个 Expo React 应用程序。

我在这里看到了一些解决方案，但它们不是通用的

Answer 1

import React, { useState } from 'react';
import { SafeAreaView, Text } from 'react-native';
import { WebView } from 'react-native-webview';

const App = () => {
  const [userInput, setUserInput] = useState('');

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <WebView
        style={{ flex: 1 }}
        originWhitelist={['*']}
        source={{ html: `
          <input type="text" id="input" placeholder="Type something"/>
          <button onclick="window.ReactNativeWebView.postMessage(document.getElementById('input').value)">
            Send Input
          </button>
        ` }}
        onMessage={(event) => setUserInput(event.nativeEvent.data)}
      />
      <Text>User Input: {userInput}</Text>
    </SafeAreaView>
  );
};

export default App;