时间戳

首页 > 解决方案 > 如何在 webview 中使用相机反应原生？

android - 如何在 webview 中使用相机反应原生？

问题描述

我正在尝试从反应原生的 web 视图中捕获图像，然后在我的 html 页面上显示相同的图像。

问题：我无法从 webview 访问相机和保存图像。

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

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

注意：当我在浏览器中打开页面时，我的页面能够捕获并保存在服务器上的数据。我对本机反应中的 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>

标签： androidreactjsreact-nativewebviewreact-native-android

解决方案

推荐阅读