From 0a7507dc2245af57e3d0c4bc136b38857e2ef9c6 Mon Sep 17 00:00:00 2001 From: Louis-C7 Date: Fri, 13 Dec 2024 15:18:25 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[#IBB4FG]=20react-native-map-linking?= =?UTF-8?q?=E9=85=8D=E5=A5=97gitee=E6=A8=A1=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/model-gitee.md | 2 +- en/react-native-map-linking.md | 154 +++++++++++++++--------------- zh-cn/react-native-map-linking.md | 146 ++++++++++++++-------------- 3 files changed, 152 insertions(+), 150 deletions(-) diff --git a/en/model-gitee.md b/en/model-gitee.md index c95021bf..01c837fa 100644 --- a/en/model-gitee.md +++ b/en/model-gitee.md @@ -8,7 +8,7 @@

原库 npm 包名

-This project is based on [原库 npm 名称@x.x.x](原库仓库连接)。 +This project is based on [原库 npm 名称@x.x.x](原库仓库连接). This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-linear-gradient`, The version correspondence details are as follows: diff --git a/en/react-native-map-linking.md b/en/react-native-map-linking.md index c8cfebbf..88c98b26 100644 --- a/en/react-native-map-linking.md +++ b/en/react-native-map-linking.md @@ -1,25 +1,19 @@ -> Template version: v0.2.2 +> 模板版本：v0.3.0

react-native-map-linking

-

- - Supported platforms - - - License - -

- +This project is based on [react-native-map-linking@1.0.1](https://github.com/starlight36/react-native-map-linking). -> [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-map-linking) +This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-map-linking`, The version correspondence details are as follows: +| Version | Package Name | Repository | Release | +| ------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | +| <= 1.0.1-0.0.1@deprecated | @react-native-oh-tpl/react-native-map-linking | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-map-linking) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-map-linking/releases) | +| > 1.0.1 | @react-native-ohos/react-native-map-linking | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking/releases) | -## Installation and Usage - -Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-map-linking Releases](https://github.com/react-native-oh-library/react-native-map-linking/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +## 1. Installation and Usage Go to the project directory and execute the following instruction: @@ -28,52 +22,73 @@ Go to the project directory and execute the following instruction: #### **npm** ```bash -npm install @react-native-oh-tpl/react-native-map-linking +npm install @react-native-ohos/react-native-map-linking ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-map-linking +yarn add @react-native-ohos/react-native-map-linking ``` The following code shows the basic use scenario of the repository: ->[!WARNING] The name of the imported repository remains unchanged. +> [!WARNING] The name of the imported repository remains unchanged. ```js -import React, { Component } from 'react'; +import React, { Component } from "react"; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, -} from 'react-native'; -import MapLinking from 'react-native-map-linking'; +} from "react-native"; +import MapLinking from "react-native-map-linking"; class MapLinkingDemo extends Component { render() { return ( {MapLinking.markLocation({lat: 39.9901079, lng:116.1887467},'香山公园','bbb')}}> + onPress={() => { + MapLinking.markLocation( + { lat: 39.9901079, lng: 116.1887467 }, + "Xiangshan Park", + "bbb" + ); + }} + > - Mark the location on the map + mark specific locations {MapLinking.planRoute({lat: 39.9901079, lng:116.1887467, title: '香山公园'}, {lat:40.0382556, lng:116.3144536, title:'清河站'}, 'drive')}}> + onPress={() => { + MapLinking.planRoute( + { lat: 39.9901079, lng: 116.1887467, title: "Xiangshan Park" }, + { lat: 40.0382556, lng: 116.3144536, title: "Qinghe Station" }, + "drive" + ); + }} + > - 规划线路 + route planning {MapLinking.navigate({lat:40.0382556, lng:116.3144536, title:'清河站'} )}}> + onPress={() => { + MapLinking.navigate({ + lat: 40.0382556, + lng: 116.3144536, + title: "Qinghe Station", + }); + }} + > - navigation + launch navigation @@ -84,81 +99,66 @@ class MapLinkingDemo extends Component { const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF", }, button: { padding: 10, - backgroundColor: '#3B5998', + backgroundColor: "#3B5998", marginBottom: 10, }, text: { - color: 'white', + color: "white", }, }); -export default MapLinkingDemo; +export default MapLinkingDemo; ``` +## 2. Constraints +### 2.1 Using this third-party library requires configuring querySchemes. -## Constraints +Please configure the `querySchemes` field in `entry/src/module.json5` to support launching Petal Map and Amap. -### Compatibility -To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. +``` +{ + "module": { + "querySchemes":[ + "maps", + "amapuri", + ], + ... + } +} +``` -Check the release version information in the release address of the third-party library:[@react-native-oh-tpl/react-native-map-linking Releases](https://github.com/react-native-oh-library/react-native-map-linking/releases) +### 2.2 Compatibility +Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native-map-linking Releases](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking/releases) -## Properties +## 3. APIs > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. > [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android. +| Name | Description | Optional | Required | Platform | HarmonyOS Support | +| ------------------------------------------ | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| markLocation(location, title, content) | Marks a specific location on the map | location: Location coordinates, an object that includes: **lat** - Latitude **lng** - Longitude **type** - Coordinate type, supports `gcj02` (China Geodetic Coordinate), `wgs84` (GPS Coordinate) **title** - Location marker name **content** - Location marker description | no | all | partially | +| planRoute(srcLocation, distLocation, mode) | Plans a route between two locations | srcLocation: Starting location coordinates, an object that includes: **lat** - Latitude **lng** - Longitude **title** - Starting location name distLocation: Destination coordinates, an object that includes: **lat** - Latitude **lng** - Longitude **type** - Coordinate type, supports `gcj02`, `wgs84` **title** - Destination name mode: Route mode, options include drive (driving), bus (public transit), walk (walking) | no | all | partially | +| navigate(distLocation) | Starts navigation from the current location to the target location | distLocation: Destination coordinates, an object that includes: **lat** - Latitude **lng** - Longitude **type** - Coordinate type, supports `gcj02`, `wgs84` **title** - Destination name | no | all | partially | -Name | Description | Optional | Required | Platform | HarmonyOS Support --- | -- | -- | -- | -- | -- -markLocation(location, title, content) | 在地图上标记一个点的位置 | location 位置坐标, 是一个对象, 包括: **lat** - 经度**lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS坐标) **title** 地点标记名称 **content** 地点标记说明 | no | all | yes -planRoute(srcLocation, distLocation, mode) | 规划两点之间的线路 | srcLocation 起始位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **title** - 起始位置名称 distLocation 结束位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS坐标) **title** - 结束位置名称 mode 路线模式 drive - 驾车 bus - 公交 walk - 步行 | no | all | yes -navigate(distLocation) | 启动当前位置到目标位置的导航 | distLocation 结束位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS坐标) **title** - 结束位置名称 | no | all | yes - -## Known Issues - -- [ ] react-native-map-link目前无法唤起百度地图，未提供应用市场地址和具体参数供react-native-map-link调用 [issue#1](https://github.com/react-native-oh-library/react-native-map-linking/issues/1) -- [ ] react-native-map-link目前无法唤起高德地图，未提供具体参数供react-native-map-link调用 [issue#2](https://github.com/react-native-oh-library/react-native-map-linking/issues/2) - -## Others - -- 如果系统内没有可用的地图, 组件会推荐下载高德地图、百度地图。 - -- 使用iOS内建地图时, 地图标记和导航功能可能不精确, 推荐使用高德地图 - -### Harmony配置Schema支持 - -Harmony系统下需要在module.json5中配置querySchemes支持才能唤起花瓣地图，后续要唤起高德地图和百度地图，也需要将它们的scheme加到这里。 - -``` -"querySchemes":[ - "maps" -] -``` - - - -### iOS配置Schema支持 +## 4. Known Issues -iOS系统下需要在App的`info.plist`中配置Schema支持才能唤起地图: +- [ ] Currently, `react-native-map-link` cannot launch Baidu Maps, as the app store URL and specific parameters required for `react-native-map-link` are not provided. [issue#1](https://github.com/react-native-oh-library/react-native-map-linking/issues/1) +- [ ] Currently, `react-native-map-link` only supports route planning with Amap. Other features are not supported yet. [issue#2](https://github.com/react-native-oh-library/react-native-map-linking/issues/2) - ``` -LSApplicationQueriesSchemes - - baidumap - iosamap - - ``` +## 5. Others -## License +- If there is no available map application installed on the system, the component will recommend downloading Amap. +- Currently, only route planning with Amap is supported. Other features such as launching navigation and marking specific locations are not yet available. -This project is licensed under [The MIT License (MIT)](https://github.com/starlight36/react-native-map-linking/blob/master/LICENSE). +## 6. License +This project is licensed under [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking/blob/master/LICENSE). diff --git a/zh-cn/react-native-map-linking.md b/zh-cn/react-native-map-linking.md index a0759827..c570ff9f 100644 --- a/zh-cn/react-native-map-linking.md +++ b/zh-cn/react-native-map-linking.md @@ -1,25 +1,19 @@ -> 模板版本：v0.2.2 +> 模板版本：v0.3.0

react-native-map-linking

-

- - Supported platforms - - - License - -

- +本项目基于 [react-native-map-linking@1.0.1](https://github.com/starlight36/react-native-map-linking) 开发。 -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-map-linking) +该第三方库的仓库已迁移至 Gitee，且支持直接从 npm 下载，新的包名为：`@react-native-ohos/react-native-map-linking`，具体版本所属关系如下： +| Version | Package Name | Repository | Release | +| ------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | +| <= 1.0.1-0.0.1@deprecated | @react-native-oh-tpl/react-native-map-linking | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-map-linking) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-map-linking/releases) | +| > 1.0.1 | @react-native-ohos/react-native-map-linking | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking/releases) | -## 安装与使用 - -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-map-linking Releases](https://github.com/react-native-oh-library/react-native-map-linking/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 1. 安装与使用 进入到工程目录并输入以下命令： @@ -28,50 +22,71 @@ #### **npm** ```bash -npm install @react-native-oh-tpl/react-native-map-linking +npm install @react-native-ohos/react-native-map-linking ``` #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-map-linking +yarn add @react-native-ohos/react-native-map-linking ``` 下面的代码展示了这个库的基本使用场景： ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] 使用时 import 的库名不变。 ```js -import React, { Component } from 'react'; +import React, { Component } from "react"; import { AppRegistry, StyleSheet, Text, View, TouchableOpacity, -} from 'react-native'; -import MapLinking from 'react-native-map-linking'; +} from "react-native"; +import MapLinking from "react-native-map-linking"; class MapLinkingDemo extends Component { render() { return ( {MapLinking.markLocation({lat: 39.9901079, lng:116.1887467},'香山公园','bbb')}}> + onPress={() => { + MapLinking.markLocation( + { lat: 39.9901079, lng: 116.1887467 }, + "香山公园", + "bbb" + ); + }} + > 在地图上标记位置 {MapLinking.planRoute({lat: 39.9901079, lng:116.1887467, title: '香山公园'}, {lat:40.0382556, lng:116.3144536, title:'清河站'}, 'drive')}}> + onPress={() => { + MapLinking.planRoute( + { lat: 39.9901079, lng: 116.1887467, title: "香山公园" }, + { lat: 40.0382556, lng: 116.3144536, title: "清河站" }, + "drive" + ); + }} + > 规划线路 {MapLinking.navigate({lat:40.0382556, lng:116.3144536, title:'清河站'} )}}> + onPress={() => { + MapLinking.navigate({ + lat: 40.0382556, + lng: 116.3144536, + title: "清河站", + }); + }} + > 导航 @@ -84,80 +99,67 @@ class MapLinkingDemo extends Component { const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF", }, button: { padding: 10, - backgroundColor: '#3B5998', + backgroundColor: "#3B5998", marginBottom: 10, }, text: { - color: 'white', + color: "white", }, }); -export default MapLinkingDemo; +export default MapLinkingDemo; ``` +## 2. 约束与限制 +### 2.1 使用该三方库需要配置 querySchemes -## 约束与限制 +请在 `entry/src/module.json5` 中配置 `querySchemes` 字段，这样才能支持唤起花瓣地图和高德地图。 -### 兼容性 -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +``` +{ + "module": { + "querySchemes":[ + "maps", + "amapuri", + ], + ... + } +} +``` -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-map-linking Releases](https://github.com/react-native-oh-library/react-native-map-linking/releases) +### 2.2 兼容性 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-ohos/react-native-map-linking Releases](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking/releases) -## 属性 +## 3. APIs > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -Name | Description | Optional | Required | Platform | HarmonyOS Support --- | -- | -- | -- | -- | -- -markLocation(location, title, content) | 在地图上标记一个点的位置 | location 位置坐标, 是一个对象, 包括: **lat** - 经度**lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS坐标) **title** 地点标记名称 **content** 地点标记说明 | no | all | yes -planRoute(srcLocation, distLocation, mode) | 规划两点之间的线路 | srcLocation 起始位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **title** - 起始位置名称 distLocation 结束位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS坐标) **title** - 结束位置名称 mode 路线模式 drive - 驾车 bus - 公交 walk - 步行 | no | all | yes -navigate(distLocation) | 启动当前位置到目标位置的导航 | distLocation 结束位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS坐标) **title** - 结束位置名称 | no | all | yes - -## 遗留问题 - -- [ ] react-native-map-link目前无法唤起百度地图，未提供应用市场地址和具体参数供react-native-map-link调用 [issue#1](https://github.com/react-native-oh-library/react-native-map-linking/issues/1) -- [ ] react-native-map-link目前无法唤起高德地图，未提供具体参数供react-native-map-link调用 [issue#2](https://github.com/react-native-oh-library/react-native-map-linking/issues/2) - -## 其他 - -- 如果系统内没有可用的地图, 组件会推荐下载高德地图、百度地图。 - -- 使用iOS内建地图时, 地图标记和导航功能可能不精确, 推荐使用高德地图 - -### Harmony配置Schema支持 - -Harmony系统下需要在module.json5中配置querySchemes支持才能唤起花瓣地图，后续要唤起高德地图和百度地图，也需要将它们的scheme加到这里。 - -``` -"querySchemes":[ - "maps" -] -``` +| Name | Description | Optional | Required | Platform | HarmonyOS Support | +| ------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | ----------------- | +| markLocation(location, title, content) | 在地图上标记一个点的位置 | location 位置坐标, 是一个对象, 包括: **lat** - 经度**lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS 坐标) **title** 地点标记名称 **content** 地点标记说明 | no | all | partially | +| planRoute(srcLocation, distLocation, mode) | 规划两点之间的线路 | srcLocation 起始位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **title** - 起始位置名称 distLocation 结束位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS 坐标) **title** - 结束位置名称 mode 路线模式 drive - 驾车 bus - 公交 walk - 步行 | no | all | partially | +| navigate(distLocation) | 启动当前位置到目标位置的导航 | distLocation 结束位置坐标, 是一个对象, 包括: **lat** - 经度 **lng** - 纬度 **type** - 坐标类型, 支持`gcj02`(国测局坐标), `wgs84`(GPS 坐标) **title** - 结束位置名称 | no | all | partially | - +## 4. 遗留问题 -### iOS配置Schema支持 +- [ ] react-native-map-link 目前无法唤起百度地图，未提供应用市场地址和具体参数供 react-native-map-link 调用 [issue#1](https://github.com/react-native-oh-library/react-native-map-linking/issues/1) +- [ ] react-native-map-link 目前仅支持高德地图使用路径规划，其他功能暂不支持 [issue#2](https://github.com/react-native-oh-library/react-native-map-linking/issues/2) -iOS系统下需要在App的`info.plist`中配置Schema支持才能唤起地图: +## 5. 其他 - ``` -LSApplicationQueriesSchemes - - baidumap - iosamap - - ``` +- 如果系统内没有可用的地图, 组件会推荐下载高德地图。 -## 开源协议 +- 目前仅支持使用高德地图做路线规划，启动导航、标注指定位置等功能暂不支持。 -本项目基于 [The MIT License (MIT)](https://github.com/starlight36/react-native-map-linking/blob/master/LICENSE) ，请自由地享受和参与开源。 +## 6. 开源协议 +本项目基于 [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-map-linking/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee