Я пытаюсь захватить изображение из веб-просмотра в реагировать на родной, а затем отобразить то же самое на моей HTML-странице.
Проблема: я не могу получить доступ к камере и сохранить изображения из веб-просмотра.
Решение: Я снимаю и сохраняю изображения, используя камеру-реактив.
Следующая проблема: я хочу отобразить это выше сохраненное изображение в моем веб-просмотре, а затем сохранить его на сервере.
Примечание. Моя страница может собирать и сохранять данные на сервере, когда я открываю их в браузере. У меня проблемы с webview в реагировать на родной.
mywebview.js file
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 file
<!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>