Question

我正在尝试从React Native的Web视图中捕获图像，然后在HTML页面上显示该图像。

问题：我无法访问摄像头并从Webview保存图像。

解决方案：我正在使用react-native-camera捕获并保存图像。

下一个问题：我想在Webview中显示以上保存的图像，然后将其保存在服务器上。

注意：当我在浏览器中打开页面时，我的页面能够捕获并将数据保存在服务器上。我在React Native中遇到了webview的问题。

mywebview.js文件

import React from 'react';
import { StyleSheet, View, WebView, ActivityIndicator } from 'react-native';

const HtmlPage = require('./index.html');

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center'
    },
    horizontal: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        padding: 10
    }
})

class WebViewScreen extends React.Component {

    webView = {
        canGoBack: false,
        ref: null,
        postMessage: function () { }
    }

    renderLoading() {
        return (<View style={[styles.container, styles.horizontal]}>
            <ActivityIndicator size="large" color="#0000ff" />
            <ActivityIndicator size="small" color="#00ff00" />
            <ActivityIndicator size="large" color="#0000ff" />
            <ActivityIndicator size="small" color="#00ff00" />
        </View>);
    }

    render() {
        return (

            <WebView
                //source={{uri:uri_source}}
                source={HtmlPage}
                style={{ marginTop: 2 }}
                onMessage={this.msgHandler.bind(this)}
                domStorageEnabled={true}
                ref={(webView) => { this.webView.ref = webView; }}
                renderLoading={this.renderLoading.bind(this)}
                startInLoadingState
            />

        );
    }
}
export default WebViewScreen

index.html文件

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Native Boiler</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <p>Hi from html 5</p>


    <img src="file:///data/user/0/com.awesomeproject/files/pic.jpg" alt="Smiley face" height="42" width="42">


</body>
</html>

如何在webview中使用相机反应本地？

0 个答案: