测试桥接

4 months ago · eb7dbc273f
3 changed files with 36 additions and 9 deletions
--- a/public/index.html
+++ b/public/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
--- a/src/index.tsx
+++ b/src/index.tsx
@ -6,6 +6,7 @@ import reportWebVitals from './reportWebVitals';
 import {
  createHashRouter,
  createRoutesFromElements,
+  Navigate,
  Route,
  RouterProvider,
 } from 'react-router-dom';
@ -19,8 +20,9 @@ import MeasureRecord from './pages/MeasureRecord';
 const router = createHashRouter(
  createRoutesFromElements(
    <Route path="/">
+      <Route index element={<Navigate to="home/measure" />} />
      <Route path="home" element={<App />}>
-        <Route path="measure" index element={<Measure />}></Route>
+        <Route path="measure" element={<Measure />}></Route>
        <Route path="setting" element={<Setting />}></Route>
        <Route path="bluetooth" element={<Bluetooth />}></Route>
        <Route path="mine" element={<Mine />}></Route>
--- a/src/pages/Measure.tsx
+++ b/src/pages/Measure.tsx
@ -11,6 +11,24 @@ import { rail6001, railTypes } from '../utils/constant';
 import RailTypeBtn from '../components/RailTypeBtn';
 import { Picker } from 'antd-mobile';

+declare global {
+  interface Window {
+    ReactNativeWebView: { postMessage: (arg: string) => void };
+    funcMap: Record<string, any>;
+    bridgeCall: (func: string, args: any[]) => void;
+  }
+}
+window.funcMap = {
+  add: (a: number, b: number) => a + b,
+  sub: (a: number, b: number) => a - b,
+};
+
+window.bridgeCall = (func, ...args) => {
+  console.log(func, args);
+  const res = window.funcMap[func].apply(null, args);
+  console.log('res:', res);
+};
+
 export default function Measure() {
  const navigate = useNavigate();

@ -19,6 +37,14 @@ export default function Measure() {
  const [railPickerVisible, setRailPickerVisible] = useState(false);
  const [railId, setRailId] = useState<(number | string | null)[]>([1]);

+  const onStartClick = () => {
+    if (typeof window.ReactNativeWebView !== 'undefined') {
+      // 发送消息给 React Native
+      window.ReactNativeWebView.postMessage(JSON.stringify(['add', 2, 3]));
+    } else {
+      console.log('当前环境不支持 React Native WebView');
+    }
+  };
  const onSaveClick = () => {
    navigate('/measure/save');
  };
@ -31,7 +57,7 @@ export default function Measure() {
  }, []);

  function railName() {
-    return railTypes.find(r => r.id === railId[0])?.name || ''
+    return railTypes.find(r => r.id === railId[0])?.name || '';
  }

  return (
@ -51,7 +77,7 @@ export default function Measure() {
                gridStep={3}
                origin={{ x: 0, y: 20 }}
                pixelPerMm={window.innerWidth / 90}
-                maxZoom={5}
+                maxZoom={8}
                showGrid={true}
                showBenchmark={true}
                showAnalysis={false}
@ -61,10 +87,7 @@ export default function Measure() {
                ref={canvasRef}
              />
              <div className="absolute left-1 bottom-1">
-                <RailTypeBtn
-                  text={railName()}
-                  onClick={() => setRailPickerVisible(true)}
-                />
+                <RailTypeBtn text={railName()} onClick={() => setRailPickerVisible(true)} />
              </div>
            </div>
          </div>
@ -77,7 +100,9 @@ export default function Measure() {
          </section>

          <section className="flex items-center gap-4 px-4 my-4">
-            <div className="btn-contained rounded-md text-sm h-10 flex-1">开始测量</div>
+            <div className="btn-contained rounded-md text-sm h-10 flex-1" onClick={onStartClick}>
+              开始测量
+            </div>
            <div className="btn-contained rounded-md text-sm h-10 flex-1" onClick={onSaveClick}>
              保存
            </div>