React Native + открытые слои не могут вызвать функции JS ⇐ Javascript

[Anonymous]

Я пытаюсь разработать приложение OpenLayers с использованием REACT Native. У меня есть 2 проекта. Первые имеют 2 функции JS, которые я хочу позвонить внутри Native Project React, используя компонент WebView. Я пытался работать с методом InjectJavascript, но он вообще не будет работать. < /P>
import { useAssets } from "expo-asset";
import { useContext, useEffect, useRef, useState } from "react";
import { useWindowDimensions } from "react-native";
import WebView from "react-native-webview";
import { Context } from "../App";

const Page = () => {
const [assets] = useAssets([require("../assets/index.html")]);
const [htmlString, setHtmlString] = useState();
const pageDimensions = useWindowDimensions();
const webViewRef = useRef(null);

const [add, setAdd, swch] = useContext(Context);

useEffect(() => {
if (assets) {
fetch(assets[0].localUri || "")
.then((res) => res.text())
.then((html) => setHtmlString(html));
}
}, [assets]);

useEffect(() => {
if (webViewRef.current) {
console.log(swch)
const functionToCall = swch ? "showMiddlemarker();" : "hideMiddlemarker();";
webViewRef.current.injectJavaScript(`${functionToCall}; true;`);
}
}, [swch]);

if (!htmlString) {
return null;
}

return (
(webViewRef.current = r)}
javaScriptEnabled
source={{
html: htmlString,
}}
style={{
width: pageDimensions.width,
height: pageDimensions.height,
}}
scrollEnabled={false}
overScrollMode="never"
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
scalesPageToFit={false}
containerStyle={{ flex: 1 }}
onLoad={() => {
webViewRef.current?.injectJavaScript(`
function showMiddlemarker() {
console.log("Showing marker");
markerElement.style.display = "block";
}
function hideMiddlemarker() {
console.log("Hiding marker");
markerElement.style.display = "none";
}
true;
`);
}}

/>
);
};

export default Page;

< /code>
Это компонент, который загружает встроенный HTML с картой. Как видите, я попытался загрузить функции внутри Onload (). Переменная SWCH должна контролировать поведение маркера. Я проверил его состояние, и оно изменяется, когда я правильно нажимаю кнопку от истинного в False. < /P>
import "./style.css"
import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Overlay from 'ol/Overlay.js';
import Point from 'ol/geom/Point.js';
import View from 'ol/View.js';
import {Icon, Style} from 'ol/style.js';
import {OGCMapTile, OSM, Vector as VectorSource} from 'ol/source.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import { fromLonLat } from 'ol/proj';

const coords = fromLonLat([25.91667,47.85])

const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM(),
}),
],
view: new View({
center: coords,
zoom: 13,
}),
});

const marker = new VectorLayer({
source: new VectorSource({
features:[
new Feature({
geometry: new Point(
coords
)
})
]
}),
style: new Style({
image: new Icon({
src:"",
scale:0.07
})
})
})

const markerElement = document.createElement("div");
markerElement.className = "marker";
markerElement.style.width = "32px";
markerElement.style.height = "32px";
markerElement.style.backgroundImage = "url('')";
markerElement.style.backgroundSize = "contain";
markerElement.style.position = "absolute";
markerElement.style.transform = "translate(-50%, -50%)";
markerElement.style.display = "block"

const markerOverlay = new Overlay({
element: markerElement,
positioning: "center-center",
stopEvent: false,
});
map.addOverlay(markerOverlay);

map.getView().on("change:center", () => {
const center = map.getView().getCenter();
markerOverlay.setPosition(center);
});

markerOverlay.setPosition(coords);

//map.addLayer(marker)

function hideMiddlemarker() {
markerElement.style.display = "none";
}

function showMiddlemarker() {
markerElement.style.display = "block";
}

< /code>
Вот проект JS с картой. Я пытаюсь позвонить в Showmiddlemarker и Hidemiddlemarker в приложении React Native, но это вообще не будет работать. Я также проверил, загружается ли WebView. Пробовал метод onMessage, и он работает, но InjectJavascript не выполняет эти 2 функции. .sstatic.net/daot6xo4.png "/>

Подробнее здесь: https://stackoverflow.com/questions/794 ... -functions