Menu
I am developing a mobile application in React Native requiring the use of Web Map Services. I have not found any library or framework that allows use WMS and react native at same time. In React (Web) I found one. My question is:
Do you know if exists any library or framework that allows me to work with WMS and React Native, or if there is any possibility of integrating a library of React (web) in React native?
Thanks!
243
React has changed the way that frontend web software is created. It's a component-based framework combined with a Javascript library that does the jobs of HTML markup, CSS stylesheets and standard JS in one go.
Does it work with React Native? Usually libraries built specifically for other platforms will not work with React Native. Examples include react-select which is built for the web and specifically targets react-dom , and rimraf which is built for Node.
React is a JavaScript library of reusable components designed to create skeletons of the apps, whereas React Native is designed to build native mobile apps with reusable components.
React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
The approach I decided to use is the following:
Using WebView from react-native.
Using openlayers.
Declare a variable in render method from your react-native class which contains the HTML code from a Map of openlayers:
render() {
var html = `
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<link rel="stylesheet" href="https://openlayers.org/en/v3.20.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v3.20.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
`
Then pass this variable to the WebView:
return (
<View style={styles.container}>
<WebView
ref={webview => { this.webview = webview; }}
source={{html}}
onMessage={this.onMessage}/>
</View>
);
}
}
If you want to communicate the react-native side with WebView side, take a look to the WebView example from react-native.
You can find more examples in the openlayers example page.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
