diff --git a/en/react-native-animatable.md b/en/react-native-animatable.md index f297d36537826123ac1669b855be6bcf353477aa..aa57f92ca0f9aa476071ff3a7ec90ec4d2a976e8 100644 --- a/en/react-native-animatable.md +++ b/en/react-native-animatable.md @@ -123,20 +123,20 @@ This document is verified based on the following versions: | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ------------------------------------------------------------ | ---------------------- | -------- | -------- | ----------------- | -| animation | Animation name. For details, see the following available animations. | string/undefined | / | all | yes | -| duration | Animation duration, in milliseconds. | number/undefined | / | all | yes | -| delay | (Optional) Animation delay, in milliseconds. | number/undefined | / | all | yes | -| direction | Animation direction, particularly suitable for animation repeating. Valid values are **normal**, **reverse**, **alternate**, and **alternate-reverse**.| string/undefined | / | all | yes | -| easing | Easing function. Valid values are **custom**, **linear**, **ease-in**, **ease-out**, and **ease-in-out**. | string/undefined | / | all | yes | -| iterationCount | Number of times an animation should be played. Set it to **infinite** for animations to be looped. | number/undefined | / | all | yes | -| iterationDelay | Time between animation iterations, in milliseconds. | number/undefined | / | all | yes | -| transition | Style property to be converted, such as opacity, rotation, or font size. Use an array if there are multiple properties to be converted.| string/array/undefined | / | all | yes | -| onAnimationBegin | Function called when the animation is started. | Function/undefined | / | all | yes | -| onAnimationEnd | Function called when the animation is successfully completed or canceled. The function is called with the **endState** parameter. Check **endState.finished** to see if the animation is complete.| Function/undefined | / | all | yes | -| onTransitionBegin | Function called when the style conversion starts. Use property parameters to call functions to distinguish styles.| Function/undefined | / | all | yes | -| onTransitionEnd | Function called when the style conversion is successfully completed or canceled. Use property parameters to call functions to distinguish styles.| Function/undefined | / | all | yes | -| useNativeDriver | Whether to use the native or JavaScript animation driver. The native driver can help improve performance, but cannot handle all types of styles.| Function/undefined | / | all | yes | -| isInteraction | Whether the animation creates an interaction handle on the interaction manager. | Boolean | / | all | yes | +| animation | Animation name. For details, see the following available animations. | string/undefined | No | all | yes | +| duration | Animation duration, in milliseconds. | number/undefined | No | all | yes | +| delay | (Optional) Animation delay, in milliseconds. | number/undefined | No | all | yes | +| direction | Animation direction, particularly suitable for animation repeating. Valid values are **normal**, **reverse**, **alternate**, and **alternate-reverse**.| string/undefined | No | all | yes | +| easing | Easing function. Valid values are **custom**, **linear**, **ease-in**, **ease-out**, and **ease-in-out**. | string/undefined | No | all | yes | +| iterationCount | Number of times an animation should be played. Set it to **infinite** for animations to be looped. | number/undefined | No | all | yes | +| iterationDelay | Time between animation iterations, in milliseconds. | number/undefined | No | all | yes | +| transition | Style property to be converted, such as opacity, rotation, or font size. Use an array if there are multiple properties to be converted.| string/array/undefined | No | all | yes | +| onAnimationBegin | Function called when the animation is started. | Function/undefined | No | all | yes | +| onAnimationEnd | Function called when the animation is successfully completed or canceled. The function is called with the **endState** parameter. Check **endState.finished** to see if the animation is complete.| Function/undefined | No | all | yes | +| onTransitionBegin | Function called when the style conversion starts. Use property parameters to call functions to distinguish styles.| Function/undefined | No | all | yes | +| onTransitionEnd | Function called when the style conversion is successfully completed or canceled. Use property parameters to call functions to distinguish styles.| Function/undefined | No | all | yes | +| useNativeDriver | Whether to use the native or JavaScript animation driver. The native driver can help improve performance, but cannot handle all types of styles.| Function/undefined | No | all | yes | +| isInteraction | Whether the animation creates an interaction handle on the interaction manager. | Boolean | No | all | yes | ## Others diff --git a/en/react-native-baidu-map.md b/en/react-native-baidu-map.md index e0b7d2634422f2e8294717283ca4aa01b1980519..3985c684baeab780af3184ead46e7089fb9235b7 100644 --- a/en/react-native-baidu-map.md +++ b/en/react-native-baidu-map.md @@ -447,102 +447,103 @@ Open `entry/src/main/module.json5`, add the following permission: | Name | Description | Type | Required | Platform | HarmonyOS Support | |-------------------------|----------------------------------|----------|----------|----------|-------------------| -| zoomControlsVisible | 显示或隐藏缩放控件 | Boolean | no | Android | yes | -| trafficEnabled | 是否启用交通图层 | Boolean | no | All | yes | -| baiduHeatMapEnabled | 是否启用百度热力图 | Boolean | no | All | no | -| zoomGesturesEnabled | 允许手势缩放 | Boolean | no | All | yes | -| scrollGesturesEnabled | 允许拖动 | Boolean | no | All | yes | -| mapType | 地图类型 | Number | no | All | partially | -| zoom | 地图的缩放级别 | Number | no | All | yes | -| showsUserLocation | 是否显示定位 | Boolean | no | All | yes | -| locationData | 定位信息 {latitude: 0, longitude: 0} | Object | no | All | yes | +| zoomControlsVisible | Displays or hides zoom controls. | Boolean | no | Android | yes | +| trafficEnabled | Enables the traffic layer. | Boolean | no | All | yes | +| baiduHeatMapEnabled | Enables Baidu heatmap. | Boolean | no | All | no | +| zoomGesturesEnabled | Allows zooming via gestures. | Boolean | no | All | yes | +| scrollGesturesEnabled | Allows dragging. | Boolean | no | All | yes | +| mapType | Type of the map. | Number | no | All | partially | +| zoom | Zoom level of the map. | Number | no | All | yes | +| showsUserLocation | Displays the user location. | Boolean | no | All | yes | +| locationData | Location data {latitude: 0, longitude: 0} | Object | no | All | yes | | center | {latitude: 0, longitude: 0} | Object | no | All | yes | -| onMapStatusChangeStart | 地图状态开始变化时的回调函数 | Function | no | Android | no | -| onMapStatusChange | 地图状态变化时的回调函数 | Function | no | All | no | -| onMapStatusChangeFinish | 地图状态变化完成时的回调函数 | Function | no | Android | no | -| onMapLoaded | 地图加载完成时的回调函数 | Function | no | All | yes | -| onMapClick | 地图被点击时的回调函数 | Function | no | All | yes | -| onMapDoubleClick | 地图被双击时的回调函数 | Function | no | All | yes | -| onMarkerClick | 地图上的标记被点击时的回调函数 | Function | no | All | no | -| onMapPoiClick | 地图上的兴趣点（POI）被点击时的回调函数 | Function | no | All | no | +| onMapStatusChangeStart | Callback triggered when map status changes start. | Function | no | Android | no | +| onMapStatusChange | Callback triggered during map status changes. | Function | no | All | no | +| onMapStatusChangeFinish | Callback triggered when map status changes finish. | Function | no | Android | no | +| onMapLoaded | Callback triggered when map loading completes. | Function | no | All | yes | +| onMapClick | Callback triggered when the map is clicked. | Function | no | All | yes | +| onMapDoubleClick | Callback triggered when the map is double-clicked. | Function | no | All | yes | +| onMarkerClick | Callback triggered when a marker is clicked. | Function | no | All | no | +| onMapPoiClick | Callback triggered when a point of interest (POI) on the map is clicked. | Function | no | All | no | #### Marker Props | Name | Description | Type | Required | Platform | HarmonyOS Support | |--------------|------------------------------------------|----------|----------|----------|-------------------| -| title | 如果没有 InfoWindow，将会根据 title 生成 InfoWindow | String | no | All | no | -| titleOffsetY | title 作为 InfoWindow 展示的 y 轴偏移量 | Number | no | Android | no | -| location | 标记的经纬度坐标位置 | Object | yes | All | yes | -| perspective | 远大近小的效果 | Boolean | no | Android | no | -| flat | 是否使标记扁平化 | Boolean | no | Android | yes | -| rotate | 旋转角度 | Number | no | Android | yes | -| icon | icon图片，同 的 source 属性 | Object | no | All | yes | -| alpha | 透明度 | Number | no | Android | yes | -| animateType | 动画效果：drop/grow/jump | String | no | All | yes | -| pinColor | red/green/purple，大头针颜色 | String | no | IOS | no | -| onClick | 当标记被点击时触发的回调函数 | Function | no | All | yes | - -#### Cluster 点聚合 +| title | Generates the **InfoWindow** based on the title if no **InfoWindow** is provided. | String | no | All | no | +| titleOffsetY | Y-axis offset for title when displayed as the **InfoWindow**. | Number | no | Android | no | +| location | Longitude and latitude coordinates of a marker. | Object | yes | All | yes | +| perspective | Perspective effect. | Boolean | no | Android | no | +| flat | Flattens a marker. | Boolean | no | Android | yes | +| rotate | Rotation angle. | Number | no | Android | yes | +| icon | Image, which is the same as the **source** property of the **Image** component. | Object | no | All | yes | +| alpha | Opacity. | Number | no | Android | yes | +| animateType | Animation effect：drop/grow/jump | String | no | All | yes | +| pinColor | Pin color: red/green/purple. | String | no | IOS | no | +| onClick | Callback triggered when a marker is clicked. | Function | no | All | yes | + +#### Cluster #### Arc Props | Name | Description | Type | Required | Platform | HarmonyOS Support | |--------|----------------|---------|----------|----------|-------------------| -| stroke | 当标记被点击时触发的回调函数 | Object | yes | All | no | -| points | 数值长度必须为 | Object | yes | All | no | -| dash | 是否为虚线 | Boolean | yes | iOS | no | +| stroke | Callback triggered when a marker is clicked.| Object | yes | All | no | +| points | The value length must be **3**. | Object | yes | All | no | +| dash | Determines if a line is dashed. | Boolean | yes | iOS | no | #### Circle Props | Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------|-------------------|--------|----------|----------|-------------------| -| radius | 圆的半径 | Number | yes | All | yes | -| fillColor | 圆的填充颜色（十六进制，带透明度） | String | yes | All | yes | -| stroke | 圆的描边样式 | Object | yes | All | yes | -| center | 圆的中心点坐标 | Object | yes | All | yes | +| radius | Radius of a circle. | Number | yes | All | yes | +| fillColor | Fill color of a circle (hexadecimal, with opacity).| String | yes | All | yes | +| stroke | Stroke style of a circle. | Object | yes | All | yes | +| center | Center point coordinates of a circle. | Object | yes | All | yes | #### Polyline Props | Name | Description | Type | Required | Platform | HarmonyOS Support | |--------|-------------|--------|----------|----------|-------------------| -| points | 折线的顶点坐标数组 | Object | yes | All | yes | -| stroke | 折线的描边样式 | Object | yes | All | no | +| points | Vertex coordinate array of a polyline. | Object | yes | All | yes | +| stroke | Stroke style of a polyline. | Object | yes | All | no | + #### Polygon Props | Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------|----------------------|--------|----------|----------|-------------------| -| points | 多边形的顶点坐标数组 | Object | yes | All | yes | -| fillColor | 多边形的填充颜色（十六进制，带透明度） | String | no | All | yes | -| stroke | 多边形的描边样式 | Object | no | All | yes | +| points | Vertex coordinate array of a polygon. | Object | yes | All | yes | +| fillColor | Fill color of a polygon (hexadecimal, with opacity). | String | no | All | yes | +| stroke | Polygon stroke type. | Object | no | All | yes | #### Text Props | Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------|---------------|--------|----------|----------|-------------------| -| text | 要显示的文本 | String | yes | All | yes | -| fontSize | 文本的字体大小 | Number | no | All | yes | -| fontColor | 文本的字体颜色（十六进制） | String | no | All | yes | -| bgColor | 文本的背景颜色（十六进制） | String | no | All | yes | -| rotate | 文本旋转的角度 | Number | no | All | yes | -| location | 文本在地图上的位置坐标 | Object | yes | All | yes | +| text | Text to display. | String | yes | All | yes | +| fontSize | Font size of the text. | Number | no | All | yes | +| fontColor | Font color of the text (hexadecimal).| String | no | All | yes | +| bgColor | Background color of the text (hexadecimal).| String | no | All | yes | +| rotate | Rotation angle of the text. | Number | no | All | yes | +| location | Coordinates of the text on the map. | Object | yes | All | yes | -#### MarkerIcon 使用 View 作为 marker 的 icon +#### MarkerIcon：Using View as a Marker Icon #### InfoWindow Props -#### 必须作为 Marker 的子组件 +#### The **InfoWindow** must be used as a subcomponent of the **Marker.** | Name | Description | Type | Required | Platform | HarmonyOS Support | |---------|--------------------------------|--------|----------|----------|-------------------| -| offsetY | 相对于 point 在 y 轴的偏移量 | Object | yes | Android | no | +| offsetY | Y-axis offset relative to the point. | Object | yes | Android | no | #### HeatMap Props | Name | Description | Type | Required | Platform | HarmonyOS Support | |----------|-------------|--------|----------|----------|-------------------| -| points | 绘制热度图的点 | array | yes | All | no | -| gradient | 颜色渐变对象 | object | yes | All | no | +| points | Points for drawing the heatmap. | array | yes | All | no | +| gradient | Gradient color object. | object | yes | All | no | ## Static Methods @@ -554,45 +555,45 @@ Open `entry/src/main/module.json5`, add the following permission: | Name | Description | Type | Required | Platform | HarmonyOS Support | |-------------------------------|-------------|------|----------|----------|-------------------| -| initSDK | iOS 初始化 SDK | void | no | All | yes | -| Promise hasLocationPermission | 是否有定位权限 | void | no | All | yes | +| initSDK | Initializes the SDK on iOS.| void | no | All | yes | +| Promise hasLocationPermission | Checks if location permission is granted. | void | no | All | yes | #### Geolocation Methods | Name | Description | Type | Required | Platform | HarmonyOS Support | |---------------------------------------------------|--------------------------------------|------|----------|----------|-------------------| -| Promise reverseGeoCode | 根据给定的经纬度坐标获取相应的地址信息 | void | no | All | no | -| Promise reverseGeoCodeGPS | 通过给定的经纬度进行反向地理编码，从而获取与该经纬度对应的地理位置信息。 | void | no | All | no | -| Promise geocode | 调用一个提供地理编码服务的API | void | no | All | no | -| Promise getCurrentPosition | 获取当前定位信息，coorType 可为 bd09ll 或 gcj02，默认 bd09ll | void | no | All | no | -| startLocating(function listener, String coorType) | 开始持续定位 | void | no | All | no | -| stopLocating | 停止持续定位 | void | no | All | no | +| Promise reverseGeoCode | Retrieves address information based on the given coordinates. | void | no | All | no | +| Promise reverseGeoCodeGPS | Performs reverse geocoding for given coordinates.| void | no | All | no | +| Promise geocode | Calls a geocoding service API. | void | no | All | no | +| Promise getCurrentPosition | Retrieves the current position. **coorType** can be **bd09ll** (default) or **gcj02**.| void | no | All | no | +| startLocating(function listener, String coorType) | Starts continuous location tracking. | void | no | All | no | +| stopLocating | Stops continuous location tracking. | void | no | All | no | #### GetDistance Methods | Name | Description | Type | Required | Platform | HarmonyOS Support | |-----------------------------|---------------|------|----------|----------|-------------------| -| Promise getLocationDistance | 计算两个地理位置之间的距离 | no | no | All | no | +| Promise getLocationDistance | Calculates the distance between two locations.| no | no | All | no | -#### MapApp Methods 调起百度地图客户端 +#### MapApp Methods: Opening the Baidu Maps Client | Name | Description | Type | Required | Platform | HarmonyOS Support | |------------------|-------------|------|----------|----------|-------------------| -| openDrivingRoute | 调起百度地图驾车规划 | void | no | All | yes | -| openTransitRoute | 调起百度地图公交路线 | void | no | All | yes | -| openWalkNavi | 调起百度地图步行路线 | void | no | All | yes | +| openDrivingRoute | Open Baidu Maps for a driving route. | void | no | All | yes | +| openTransitRoute | Open Baidu Maps for a transit route. | void | no | All | yes | +| openWalkNavi | Open Baidu Maps for a walking route. | void | no | All | yes | ## Known Issues -- [ ] Arc覆盖物未实现 [#15](https://github.com/react-native-oh-library/react-native-baidu-map/issues/15) -- [ ] infoWindow覆盖物未实现 [#16](https://github.com/react-native-oh-library/react-native-baidu-map/issues/16) -- [ ] HeatMap覆盖物未实现 [#17](https://github.com/react-native-oh-library/react-native-baidu-map/issues/17) -- [ ] Cluster 覆盖物未实现 [#18](https://github.com/react-native-oh-library/react-native-baidu-map/issues/18) -- [ ] MarkerIcon 覆盖物未实现 [#19](https://github.com/react-native-oh-library/react-native-baidu-map/issues/19) -- [ ] MapView部分事件未实现 [#20](https://github.com/react-native-oh-library/react-native-baidu-map/issues/20) -- [ ] marker的title、pincolor、perspective属性未实现 [#21](https://github.com/react-native-oh-library/react-native-baidu-map/issues/21) -- [ ] Geolocation 静态类功能未实现 [#22](https://github.com/react-native-oh-library/react-native-baidu-map/issues/22) -- [ ] GetDistance静态类功能未实现 [#23](https://github.com/react-native-oh-library/react-native-baidu-map/issues/23) -- [ ] Polyline的stroke属性未实现 [#21](https://github.com/react-native-oh-library/react-native-baidu-map/issues/29) +- [ ] The Arc overlay is not implemented. [#15](https://github.com/react-native-oh-library/react-native-baidu-map/issues/15) +- [ ] The infoWindow overlay is not implemented. [#16](https://github.com/react-native-oh-library/react-native-baidu-map/issues/16) +- [ ] The HeatMap overlay is not implemented. [#17](https://github.com/react-native-oh-library/react-native-baidu-map/issues/17) +- [ ] The Cluster overlay is not implemented. [#18](https://github.com/react-native-oh-library/react-native-baidu-map/issues/18) +- [ ] The MarkerIcon overlay is not implemented. [#19](https://github.com/react-native-oh-library/react-native-baidu-map/issues/19) +- [ ] Some MapView events are not implemented. [#20](https://github.com/react-native-oh-library/react-native-baidu-map/issues/20). +- [ ] The title, pincolor, and perspective properties of the marker are not implemented. [#21](https://github.com/react-native-oh-library/react-native-baidu-map/issues/21). +- [ ] The Geolocation static class function is not implemented. [#22](https://github.com/react-native-oh-library/react-native-baidu-map/issues/22). +- [ ] The GetDistance static class function is not implemented. [#23](https://github.com/react-native-oh-library/react-native-baidu-map/issues/23). +- [ ] The stroke property of Polyline is not implemented. [#21](https://github.com/react-native-oh-library/react-native-baidu-map/issues/29). ## Others diff --git a/en/react-native-ble-plx.md b/en/react-native-ble-plx.md index 94cbf6c057d5ea192ef82348377e1d890e91b1cf..3cea0d04ecd1e5a90213885e5248f472bfc05777 100644 --- a/en/react-native-ble-plx.md +++ b/en/react-native-ble-plx.md @@ -43,20 +43,19 @@ The following code shows the basic use scenario of the repository: > [!WARNING] The name of the imported repository remains unchanged. ```js +import React from 'react'; +import { View, Button, Alert } from 'react-native'; import { - BleError, BleErrorCode, BleManager, Device, - State as BluetoothState, - LogLevel, + Service, + Descriptor, type DeviceId, - type TransactionId, type UUID, type Characteristic, - type Base64, - type Subscription -} from 'react-native-ble-plx' +} from 'react-native-ble-plx'; +import Toast from 'react-native-simple-toast'; class BLEServiceInstance { manager: BleManager @@ -68,7 +67,7 @@ class BLEServiceInstance { } scanDevices = async (onDeviceFound: (device: Device) => void, UUIDs: UUID[] | null = null) => { - this.manager.startDeviceScan(UUIDs, null, (error, device) => { + this.manager.startDeviceScan(UUIDs, null, (error: any, device: any) => { if (error) { console.error(error.message) this.manager.stopDeviceScan() @@ -85,11 +84,11 @@ class BLEServiceInstance { this.manager.stopDeviceScan() this.manager .connectToDevice(deviceId) - .then(device => { + .then((device: any) => { this.device = device resolve(device) }) - .catch(error => { + .catch((error: any) => { if (error.errorCode === BleErrorCode.DeviceAlreadyConnected && this.device) { resolve(this.device) } else { @@ -98,51 +97,110 @@ class BLEServiceInstance { } }) }) +} - discoverAllServicesAndCharacteristicsForDevice = async () => - new Promise((resolve, reject) => { - if (!this.device) { - reject(new Error(deviceNotConnectedErrorText)) - return - } - this.manager - .discoverAllServicesAndCharacteristicsForDevice(this.device.id) - .then(device => { - resolve(device) - this.device = device - }) - .catch(error => { - reject(error) - }) - }) +class App extends React.Component { + deviceName: string = 'time' + serviceUuid: string = '00001820-0000-1000-8000-00805F9B34FB' + characteristicUuid: string = '00001820-0000-1000-8000-00805F9B34FB' + descriptorUuid: string = '00002903-0000-1000-8000-00805F9B34FB' - readCharacteristicForDevice = async (serviceUUID: UUID, characteristicUUID: UUID) => - new Promise((resolve, reject) => { - if (!this.device) { - reject(new Error(deviceNotConnectedErrorText)) - return + device?: Device; + + service?: Service; + + characteristic?: Characteristic; + + descriptor?: Descriptor; + + showLog(text: string) { + Toast.show(text, Toast.SHORT); + console.log('bleplx showLog:' + text); + }; + + ble = new BLEServiceInstance((text: string) => { + this.showLog(text); + }); + + enable = () => { + this.ble.manager.enable(); + Toast.show('enable', Toast.SHORT) + } + + disable = () => { + this.ble.manager.disable(); + Toast.show('disable', Toast.SHORT) + } + + startScan = () => { + console.log('startScan'); + Toast.show('Begin scanning peripherals', Toast.LONG) + this.ble.manager.startDeviceScan(null, null, (error: any, device: any) => { + if (device?.name) { + console.log('bleplx: startScan result:' + device?.name); + } + if (device?.name?.toLocaleLowerCase() == this.deviceName) { + if (this.device != null) { + return + } + this.device = device; + this.stopDeviceScan(); + Alert.alert( + 'Detect external device:' + device.name, + 'Is it connected?', + [ + { + text: 'Is it connected?', + style: 'cancel' + }, + { + text: 'Is it connected?', + onPress: () => { + this.connectToDevice(); + }, + style: 'destructive' + } + ] + ) } - this.manager - .readCharacteristicForDevice(this.device.id, serviceUUID, characteristicUUID) - .then(characteristic => { - resolve(characteristic) - }) - .catch(error => { - console.error(error.message) - }) }) + } - writeCharacteristicWithResponseForDevice = async (serviceUUID: UUID, characteristicUUID: UUID, time: Base64) => { - if (!this.device) { - console.error(deviceNotConnectedErrorText) - throw new Error(deviceNotConnectedErrorText) + stopDeviceScan = () => { + this.ble.manager.stopDeviceScan(); + Toast.show('stopDeviceScan', Toast.SHORT) + } + + connectToDevice = () => { + if (this.device == null) { + console.log('bleplx: The specified connected device was not found.'); + return; } - return this.manager - .writeCharacteristicWithResponseForDevice(this.device.id, serviceUUID, characteristicUUID, time) - .catch(error => { - console.error(error.message) - }) + + console.log('bleplx: Begin connection：' + this.device.id); + Toast.show('Begin connecting external devices', Toast.LONG) + this.ble.manager.connectToDevice(this.device.id).then((device: any) => { + Toast.show('Connection successful', Toast.SHORT); + console.log('bleplx:Connection successful:' + JSON.stringify(device)); + }).catch((error: any) => { + Toast.show('Connection failed', Toast.SHORT); + console.log('bleplx:Connection failed:' + error.message); + }); } + + render() { + return ( + + + + + + + ) + } +} + +export default App; ``` ## Use Codegen @@ -236,9 +294,9 @@ Check the release version information in the release address of the third-party ### Permission Requirements -- 由于此库涉及蓝牙系统控制功能，使用对应接口时则需要配置对应的权限，权限需配置在entry/src/main目录下module.json5文件中。其中部分权限需弹窗向用户申请授权。具体权限配置见文档：[程序访问控制](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。 +- This library involves the Bluetooth system control function. Therefore, you need to configure the corresponding permission in the **module.json5** file in the **entry/src/main** directory when using the corresponding APIs. Some permissions need to be requested from users in a pop-up window. For details about the permission configuration, see [Application Access Control](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。 -- 此库部分功能与接口需要normal权限：ohos.permission.ACCESS_BLUETOOTH。 +- Some functions and APIs of this library require the **normal** permission **ohos.permission.ACCESS_BLUETOOTH**. ## API diff --git a/en/react-native-clippath-capi.md b/en/react-native-clippath-capi.md index ea2985fb73ecad475e47e1e8be87ed74430f1628..a35fd610230f9af1b60054058e1f99556715ccda 100644 --- a/en/react-native-clippath-capi.md +++ b/en/react-native-clippath-capi.md @@ -203,35 +203,35 @@ Check the release version information in the release address of the third-party > [!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 | Type | Required | Platform | HarmonyOS Support | -| -------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | -| svgKey | 唯一 key | string | No | Web | No | -| d | 形状由一系列命令定义（svg path data） | string | No | iOS/Android | Yes | -| viewBox | 定义用户空间中的位置和维度 | Array(4) | No | iOS/Android | Yes | -| align | preserveAspectRatio 属性的 align | string | No | iOS/Android | Yes | -| aspect | preserveAspectRatio 属性的 meetOrSlice | meet/slice/none | No | iOS/Android | Yes | -| fillRule | 路径内部填充规则 | nonzero/evenodd | No | iOS/Android | Yes | -| strokeWidth | 路径描边宽度 | number | No | iOS/Android | Yes | -| strokeCap | 开放路径两端的形状 | butt/round/square | No | iOS/Android | Yes | -| strokeJoin | 路径转角处使用的形状 | bevel/miter/round | No | iOS/Android | Yes | -| strokeMiter | strokeJoin 值是 miter，设置夹角延伸 | number | No | iOS/Android | Yes | -| strokeStart | iOS CAShapeLayer 描线开始的地方占总路径的百分比。默认值是 0。 | number | No | iOS/Android | Yes | -| strokeEnd | iOS CAShapeLayer 表示绘制结束的地方站总路径的百分比。默认值是 1，如果小于等于 strokeStart 则绘制不出任何内容。 | number | No | iOS/Android | Yes | -| translateZ | 设置定位层级，相当于 index | number | No | iOS/Android | Yes | -| transX | 在二维平面上水平方向移动元素 | number | No | iOS/Android | Yes | -| transY | 在二维平面上垂直方向移动元素 | number | No | iOS/Android | Yes | -| transPercentageValue | transX、transY 使用百分比 | boolean | No | iOS/Android | Yes | -| rot | 元素围绕一个定点旋转 | number | No | iOS/Android | Yes | -| rotOx | 旋转中心点水平位置 | number | No | iOS/Android | Yes | -| rotOy | 旋转中心点垂直位置 | number | No | iOS/Android | Yes | -| rotPercentageValue | rotOx、rotOy 使用百分比 | boolean | No | iOS/Android | Yes | -| sc | 放大或缩小元素 | number | No | iOS/Android | Yes | -| scX | 水平缩放 | number | No | iOS/Android | Yes | -| scY | 垂直缩放 | number | No | iOS/Android | Yes | -| scO | 缩放中心点位置 | number | No | iOS/Android | Yes | -| scOx | 缩放中心点水平位置 | number | No | iOS/Android | Yes | -| scOy | 缩放中心点垂直位置 | number | No | iOS/Android | Yes | -| scPercentageValue | scO、scOx、scOy 使用百分比 | boolean | No | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ----------------- | -------- | ----------- | ----------------- | +| svgKey | Unique key. | string | No | Web | No | +| d | Path shape defined by a series of commands (SVG path data). | string | No | iOS/Android | Yes | +| viewBox | Defines the position and dimensions in user space. | Array(4) | No | iOS/Android | Yes | +| align | **align** of the **preserveAspectRatio** property. | string | No | iOS/Android | Yes | +| aspect | **meetOrSlice** of the **preserveAspectRatio** property. | meet/slice/none | No | iOS/Android | Yes | +| fillRule | Path fill rule. | nonzero/evenodd | No | iOS/Android | Yes | +| strokeWidth | Path stroke width. | number | No | iOS/Android | Yes | +| strokeCap | Shape of the ends of open paths. | butt/round/square | No | iOS/Android | Yes | +| strokeJoin | Shape used at corners of paths. | bevel/miter/round | No | iOS/Android | Yes | +| strokeMiter | Miter length when **strokeJoin** is **miter**. | number | No | iOS/Android | Yes | +| strokeStart | Percentage of the starting point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **0**.| number | No | iOS/Android | Yes | +| strokeEnd | Percentage of the ending point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **1**. If the value is less than or equal to that of **strokeStart**, no content is drawn.| number | No | iOS/Android | Yes | +| translateZ | Sets the positioning layer depth (similar to index). | number | No | iOS/Android | Yes | +| transX | Horizontal translation in a 2D plane. | number | No | iOS/Android | Yes | +| transY | Vertical translation in a 2D plane. | number | No | iOS/Android | Yes | +| transPercentageValue | Whether **transX** and **transY** use percentage values. | boolean | No | iOS/Android | Yes | +| rot | Rotation of an element around a specific point. | number | No | iOS/Android | Yes | +| rotOx | Horizontal position of the rotation origin. | number | No | iOS/Android | Yes | +| rotOy | Vertical position of the rotation origin. | number | No | iOS/Android | Yes | +| rotPercentageValue | Whether **rotOx** and **rotOy** use percentage values. | boolean | No | iOS/Android | Yes | +| sc | Uniform scaling of an element. | number | No | iOS/Android | Yes | +| scX | X-axis scaling. | number | No | iOS/Android | Yes | +| scY | Y-axis scaling. | number | No | iOS/Android | Yes | +| scO | Scaling origin point. | number | No | iOS/Android | Yes | +| scOx | Horizontal position of the scaling origin. | number | No | iOS/Android | Yes | +| scOy | Vertical position of the scaling origin. | number | No | iOS/Android | Yes | +| scPercentageValue | Whether **scO**, **scOx**, and **scOy** use percentage values. | boolean | No | iOS/Android | Yes | ## Known Issues @@ -239,4 +239,4 @@ Check the release version information in the release address of the third-party ## License -This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-clippath/blob/capi/LICENSE). +This project is licensed under [The MIT License (MIT)](https://github.com/Only-IceSoul/react-native-clippath/blob/main/LICENSE). diff --git a/en/react-native-clippathview.md b/en/react-native-clippathview.md index ea584a45fc4fa40efc935f3638d1619ef6ea5a70..f5f5c9b0d13cffcb19d5e68b9b5160996b1319e7 100644 --- a/en/react-native-clippathview.md +++ b/en/react-native-clippathview.md @@ -1,4 +1,4 @@ -> 模板版本：v0.2.2 +> Template version：v0.2.2

react-native-clippathview

@@ -14,13 +14,13 @@ -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-clippath) +> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-clippath) -## 安装与使用 +## Installation and Usage Find the matching version information in the release address of a third-party library：[@react-native-oh-tpl/react-native-clippathview Releases](https://github.com/react-native-oh-library/react-native-clippath/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. -进入到工程目录并输入以下命令： +Go to the project directory and execute the following instruction: @@ -39,7 +39,7 @@ yarn add @react-native-oh-tpl/react-native-clippathview -下面的代码展示了这个库的基本使用场景： +The following code shows the basic use scenario of the repository: ```jsx import { View, Text, ScrollView } from "react-native"; @@ -62,25 +62,25 @@ export default function index() { } ``` -## 约束与限制 +## Constraints -### 兼容性 +### Compatibility -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 +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. -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-clippathview Releases](https://github.com/react-native-oh-library/react-native-clippath/releases) +Check the release version information in the release address of the third-party library:[@react-native-oh-tpl/react-native-clippathview Releases](https://github.com/react-native-oh-library/react-native-clippath/releases) -## 使用 Codegen +## Use Codegen -本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 +If this repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md). ## Link -目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 +Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking. -首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` +Open the `harmony` directory of the HarmonyOS project in DevEco Studio. -### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 +### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project ```json { @@ -91,18 +91,18 @@ export default function index() { } ``` -### 2.引入原生端代码 +### 2.Introducing Native Code -目前有两种方法： +Currently, two methods are available: -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 +1. (Recommended) Use the HAR file. +2. Directly link to the source code. -方法一：通过 har 包引入 +Method 1 (recommended): Use the HAR file. -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 +> [!TIP] The HAR file is stored in the harmony directory in the installation path of the third-party library. -打开 `entry/oh-package.json5`，添加以下依赖 +Open entry/oh-package.json5 file and add the following dependencies: ```json "dependencies": { @@ -111,22 +111,22 @@ export default function index() { } ``` -点击右上角的 `sync` 按钮 +Click the sync button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -方法二：直接链接源码 +Method 2: Directly link to the source code. -> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) +> [!TIP] For details, see[Directly Linking Source Code](/en/link-source-code.md) -### 3.在 ArkTs 侧引入 ClipPath 组件 +### 3.Introducing ClipPath component to Arkts -找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： +Find * * function buildCustoms Component () * *, usually located in ` entry/src/main/ets/pages/index. ets ` or ` entry/src/main/ets/rn/LoadBundle. ets `, and add the following code: ```diff ... @@ -152,9 +152,9 @@ function buildCustomComponent(ctx: ComponentBuilderContext) { ... ``` -### 4.在 ArkTs 侧引入 ClipPathPackage +### 4. Introducing ClipPathPackage to ArkTS -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： +Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code: ```diff import type {RNPackageContext, RNPackage} from 'rnoh/ts'; @@ -169,63 +169,63 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 5.运行 +### 5.Running -点击右上角的 `sync` 按钮 +Click the `sync` button in the upper right corner. -或者在终端执行： +Alternatively, run the following instruction on the terminal: ```bash cd entry ohpm install ``` -然后编译、运行即可。 +Then build and run the code. -## 属性 +## Properties -> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. -> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!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 | Type | Required | Platform | HarmonyOS Support | | -------------------- | ------------------------------------------------------------ | ----------------- | -------- | ----------- | ----------------- | -| svgKey | 唯一 key | string | No | iOS/Android | Yes | -| d | 形状由一系列命令定义（svg path data） | string | No | iOS/Android | Yes | -| viewBox | 定义用户空间中的位置和维度 | Array(4) | No | iOS/Android | Yes | -| align | preserveAspectRatio 属性的 align | string | No | iOS/Android | No | -| aspect | preserveAspectRatio 属性的 meetOrSlice | meet/slice/none | No | iOS/Android | No | -| fillRule | 路径内部填充规则 | nonzero/evenodd | No | iOS/Android | No | -| strokeWidth | 路径描边宽度 | number | No | iOS/Android | Yes | -| strokeCap | 开放路径两端的形状 | butt/round/square | No | iOS/Android | Yes | -| strokeJoin | 路径转角处使用的形状 | bevel/miter/round | No | iOS/Android | Yes | -| strokeMiter | strokeJoin 值是 miter，设置夹角延伸 | number | No | iOS/Android | Yes | -| strokeStart | iOS CAShapeLayer 描线开始的地方占总路径的百分比。默认值是 0。 | number | No | iOS/Android | No | -| strokeEnd | iOS CAShapeLayer 表示绘制结束的地方站总路径的百分比。默认值是 1，如果小于等于 strokeStart 则绘制不出任何内容。 | number | No | iOS/Android | No | -| translateZ | 设置定位层级，相当于 index | number | No | iOS/Android | Yes | -| transX | 在二维平面上水平方向移动元素 | number | No | iOS/Android | Yes | -| transY | 在二维平面上垂直方向移动元素 | number | No | iOS/Android | Yes | -| transPercentageValue | transX、transY 使用百分比 | boolean | No | iOS/Android | Yes | -| rot | 元素围绕一个定点旋转 | number | No | iOS/Android | Yes | -| rotOx | 旋转中心点水平位置 | number | No | iOS/Android | Yes | -| rotOy | 旋转中心点垂直位置 | number | No | iOS/Android | Yes | -| rotPercentageValue | rotOx、rotOy 使用百分比 | boolean | No | iOS/Android | Yes | -| sc | 放大或缩小元素 | number | No | iOS/Android | Yes | +| svgKey | Unique key. | string | No | iOS/Android | Yes | +| d | Path shape defined by a series of commands (SVG path data). | string | No | iOS/Android | Yes | +| viewBox | Defines the position and dimensions in user space. | Array(4) | No | iOS/Android | Yes | +| align | **align** of the **preserveAspectRatio** | string | No | iOS/Android | No | +| aspect | **meetOrSlice** of the **preserveAspectRatio** | meet/slice/none | No | iOS/Android | No | +| fillRule | Path fill rule. | nonzero/evenodd | No | iOS/Android | No | +| strokeWidth | Path stroke width. | number | No | iOS/Android | Yes | +| strokeCap | Shape of the ends of open paths. | butt/round/square | No | iOS/Android | Yes | +| strokeJoin | Shape used at corners of paths. | bevel/miter/round | No | iOS/Android | Yes | +| strokeMiter | Miter length when **strokeJoin** is **miter**. | number | No | iOS/Android | Yes | +| strokeStart | Percentage of the starting point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **0**. | number | No | iOS/Android | No | +| strokeEnd | Percentage of the ending point of the **CAShapeLayer** stroke to the total path on iOS. The default value is **1**. If the value is less than or equal to that of **strokeStart**, no content is drawn. | number | No | iOS/Android | No | +| translateZ | Sets the positioning layer depth (similar to index). index | number | No | iOS/Android | Yes | +| transX | Horizontal translation in a 2D plane. | number | No | iOS/Android | Yes | +| transY | Vertical translation in a 2D plane. | number | No | iOS/Android | Yes | +| transPercentageValue | Whether **transX** and **transY** use percentage values. | boolean | No | iOS/Android | Yes | +| rot | Rotation of an element around a specific point. | number | No | iOS/Android | Yes | +| rotOx | Horizontal position of the rotation origin. | number | No | iOS/Android | Yes | +| rotOy | Vertical position of the rotation origin. | number | No | iOS/Android | Yes | +| rotPercentageValue | Whether **rotOx** and **rotOy** use percentage values. | boolean | No | iOS/Android | Yes | +| sc | Uniform scaling of an element. | number | No | iOS/Android | Yes | | scX | 水平缩放 | number | No | iOS/Android | Yes | -| scY | 垂直缩放 | number | No | iOS/Android | Yes | -| scO | 缩放中心点位置 | number | No | iOS/Android | Yes | -| scOx | 缩放中心点水平位置 | number | No | iOS/Android | Yes | -| scOy | 缩放中心点垂直位置 | number | No | iOS/Android | Yes | -| scPercentageValue | scO、scOx、scOy 使用百分比 | boolean | No | iOS/Android | Yes | +| scY | X-axis scaling. | number | No | iOS/Android | Yes | +| scO | Scaling origin point. | number | No | iOS/Android | Yes | +| scOx | Horizontal position of the scaling origin. | number | No | iOS/Android | Yes | +| scOy | Vertical position of the scaling origin. | number | No | iOS/Android | Yes | +| scPercentageValue | Whether **scO**, **scOx**, and **scOy** use percentage values. | boolean | No | iOS/Android | Yes | -## 遗留问题 +## Known Issues -- [ ] 部分属性目前版本暂不支持，具体参考属性表格 `HarmonyOS ` 列: [issue#15](https://github.com/react-native-oh-library/react-native-clippath/issues/15) +- [ ] Some attributes are currently not supported in the current version. Please refer to the 'HarmonyOS' column in the attribute table for details: [issue # 15](https://github.com/react-native-oh-library/react-native-clippath/issues/15) -## 其他 +## Others -## 开源协议 +## License -本项目基于 [The MIT License (MIT)](https://github.com/Only-IceSoul/react-native-clippath/blob/main/LICENSE) ，请自由地享受和参与开源。 +This project is licensed under [The MIT License (MIT)](https://github.com/Only-IceSoul/react-native-clippath/blob/main/LICENSE) . --- diff --git a/en/react-native-drop-shadow.md b/en/react-native-drop-shadow.md index 54994c4f691371a442b64966a8fbee44e85a7500..9c31dc21d1f31c4d698e911dac5f1f6f1e6c6d53 100644 --- a/en/react-native-drop-shadow.md +++ b/en/react-native-drop-shadow.md @@ -13,7 +13,7 @@

-> [!TIP] [Github address](https://github.com/hoanglam10499/react-native-drop-shadow) +> [!TIP] [Github address](https://github.com/hoanglam10499/react-native-drop-shadow/tree/1.0.0) ## Installation and Usage @@ -118,8 +118,8 @@ export default function withAnimatedViews() { You can then use `AnimatedDropShadow` in place of `Animated.View`. ## Constraints -- Android 的位图限制为 2048x2048，但这可能取决于 API 版本。 -- 使用位图渲染来模拟阴影，如果同时渲染多个阴影和动画，则阴影可能会影响性能。 +- The bitmap size in Android is limited to 2048x2048, though this may vary depending on the API version. +- Using bitmaps to render shadows impacts performance, especially if multiple shadows and animations are rendered simultaneously. ### Compatibility @@ -135,13 +135,13 @@ react-native-harmony: 0.72.33; SDK: Openharmony 5.0.0.71(API Version 12 Release) > [!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 | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| style | 设置阴影的样式，可以使用常规的样式属性 | style | no | Android/IOS | yes | -| shadowColor | 设置阴影的颜色，可以使用CSS颜色值或RGBA值 | string | no | Android/IOS | yes | -| shadowOffset | 设置阴影的偏移量 | number | no | Android/IOS | yes | -| shadowOpacity | 设置阴影的不透明度，取值范围为0到1之间，0表示完全透明，1表示完全不透明 | number | no | Android/IOS | yes | -| shadowRadius | 设置阴影的模糊半径，用于控制阴影的模糊程度 | number | no | Android/IOS | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- | +| style | Shadow style. Common style attributes can be used. | style | no | Android/IOS | yes | +| shadowColor | Shadow color. CSS color values or RGBA values can be used. | string | no | Android/IOS | yes | +| shadowOffset | Shadow offset. | number | no | Android/IOS | yes | +| shadowOpacity | Shadow opacity. The value ranges from **0** to **1**. **0** indicates completely transparent, and **1** indicates completely opaque.| number | no | Android/IOS | yes | +| shadowRadius | Shadow radius, which controls the level of blur applied to the shadow. | number | no | Android/IOS | yes | ## Known Issues diff --git a/en/react-native-pull.md b/en/react-native-pull.md index 2cb8d8baa200f2a7e06a687f5b835e62b7e9f804..6acfa3ec0d4d9a58ef756573594c018771b55331 100644 --- a/en/react-native-pull.md +++ b/en/react-native-pull.md @@ -50,90 +50,99 @@ The following code shows the basic use scenario of the repository: ```js import React, { Component, useState } from 'react'; import { -StyleSheet, -Text, -View, -ActivityIndicator, -Dimensions, + StyleSheet, + Text, + View, + ActivityIndicator, + Dimensions, } from 'react-native'; -import {PullView} from 'react-native-pull'; +import { PullView } from 'react-native-pull'; + +interface testObjType { + pulling: String, + pullok: String, + pullrelease: String, + pushing: String, + refresh: String, + isPullEnd: String +} const PullViewDemo = () => { -const [count, setCount] = useState(0); -let testObj = { - pulling:null, - pullok:null, - pullrelease:null, - pushing:null, - refresh:null, - isPullEnd:null -}; -const [data, setData] = useState(testObj); -const onPulling = () => { - testObj.pulling='pulling--------->' - setData(testObj) -}; -const onPullOk = () => { - testObj.pullok='pullok--------->' - setData(testObj) + const [count, setCount] = useState(0); + let testObj: testObjType = { + pulling: '', + pullok: '', + pullrelease: '', + pushing: '', + refresh: '', + isPullEnd: '' + }; + const [data, setData] = useState(testObj); + const onPulling = () => { + testObj.pulling = 'pulling--------->' + setData(testObj) + }; + const onPullOk = () => { + testObj.pullok = 'pullok--------->' + setData(testObj) + }; + const onPullRelease = (resolve: any) => { + //do something + testObj.pullrelease = 'pullrelease--------->' + setData(testObj) + setTimeout(() => { + resolve(); + }, 3000); + }; + const onPushing = (gesturePosition: any) => { + testObj.pushing = 'x:' + gesturePosition.x + '------' + 'y：' + gesturePosition.y + setData(testObj) + }; + const topIndicatorRender = (pulling: any, pullok: any, pullrelease: any) => { + if (pulling) { + setCount('Pull-to-refresh: pulling...') + } else if (pullok) { + setCount('Release-to-refresh: pullok...') + } else if (pullrelease) { + setCount('Refreshing: pullrelease...') + } + return ( + + + {pulling ? {count} : null} + {pullok ? {count} : null} + {pullrelease ? {count} : null} + + ); + }; + + return ( + + + + 1*************** + onPulling:{testObj.pulling} + 3 + onPullOk:{testObj.pullok} + 5 + onPullRelease:{testObj.pullrelease} + 7 + onPushing:{testObj.pushing} + 9 + + + + ); }; -const onPullRelease = (resolve) => { - //do something - testObj.pullrelease='pullrelease--------->' - setData(testObj) - setTimeout(() => { - resolve(); - }, 3000); - }; - const onPushing = (gesturePosition) => { - testObj.pushing = 'x:' + gesturePosition.x + '------' + 'y: ' + gesturePosition.y - setData(testObj) - }; - const topIndicatorRender = (pulling, pullok, pullrelease) => { - if (pulling) { - setCount('Pull-to-refresh: pulling...') - } else if (pullok) { - setCount('Release-to-refresh: pullok...') - } else if (pullrelease) { - setCount('Refreshing: pullrelease...') - } - return ( - - - {pulling ? {count} : null} - {pullok ? {count} : null} - {pullrelease ? {count} : null} - - ); - }; - - return ( - - - - 1*************** - onPulling:{testObj.pulling} - 3 - onPullOk:{testObj.pullok} - 5 - onPullRelease:{testObj.pullrelease} - 7 - onPushing:{testObj.pushing} - 9 - - - - ); - > }; export default PullViewDemo; const styles = StyleSheet.create({ container: { @@ -150,7 +159,7 @@ const styles = StyleSheet.create({ > code example ```jsx -import React, { Component, useState } from 'react'; +import React, { useState } from 'react'; import { StyleSheet, Text, @@ -161,17 +170,26 @@ import { } from 'react-native'; import {PullList} from 'react-native-pull'; +interface testObjType { + pulling: String, + pullok: String, + pullrelease: String, + pushing: String, + refresh: String, + isPullEnd: String +} + const PullListDemo = () => { - let testObj = { - pulling:null, - pullok:null, - pullrelease:null, - pushing:null, - refresh:null, - isPullEnd:null + let testObj: testObjType = { + pulling:'', + pullok:'', + pullrelease:'', + pushing:'', + refresh:'', + isPullEnd:'' }; - const [count, setCount] = useState(0); + const [count, setCount] = useState(0); const [data, setData] = useState(testObj); const [stateList, setStateList] = useState( [ @@ -236,7 +254,7 @@ const PullListDemo = () => { setData(testObj) }; - const onPullRelease = (resolve) => { + const onPullRelease = (resolve: any) => { //do something testObj.pullrelease='pullrelease--------->' setData(testObj) @@ -296,12 +314,12 @@ const PullListDemo = () => { }; - const onPushing = (gesturePosition) => { + const onPushing = (gesturePosition: any) => { testObj.pushing = 'x:' + gesturePosition.x + '------' + 'y: ' + gesturePosition.y setData(testObj) }; - const topIndicatorRender = (pulling, pullok, pullrelease) => { + const topIndicatorRender = (pulling: any, pullok: any, pullrelease: any) => { if (pulling) { setCount('Current PullList state: pulling...') } else if (pullok) { @@ -329,7 +347,7 @@ const PullListDemo = () => { ); } - const renderRow = ({item}) => { + const renderRow = ({item}: any) => { return ( {item.title} @@ -346,11 +364,11 @@ const PullListDemo = () => { } const loadMore = () => { - const list = [] + const list: { id: number; title: string }[] = [] const num = stateList.length for(var i = 0; i < 5; i++) { list.push({ - id: (i + 1 + num) + '', + id: (i + 1 + num), title: `------>Item${(i+num+1)}`, }) } diff --git a/en/react-native-scrollable-tabview.md b/en/react-native-scrollable-tabview.md index 1135baba18148776d601cfd3daf0b2c2ef568b38..fee6093319370ecf20d8a3930ab3fb81cd221610 100644 --- a/en/react-native-scrollable-tabview.md +++ b/en/react-native-scrollable-tabview.md @@ -12,7 +12,7 @@

-> [!TIP] [GitHub address](https://github.com/itenl/react-native-scrollable-tabview) +> [!TIP] [GitHub address](https://github.com/itenl/react-native-scrollable-tabview/tree/v1.1.7) ## Installation and Usage diff --git a/zh-cn/react-native-animatable.md b/zh-cn/react-native-animatable.md index 4c03eeb4dc412c417bec817f0c924eccf9e7730a..590542361b9558babd4f98873b6224f6a0e835b5 100644 --- a/zh-cn/react-native-animatable.md +++ b/zh-cn/react-native-animatable.md @@ -94,20 +94,20 @@ export default function ExampleView() { Name | Description | Type | Required | Platform | HarmonyOS Support -- | -- | -- | -- | -- | -- -animation | 动画的名称，请参见下面的可用动画 | string/undefined | / | all | yes -duration | 动画将运行的时间（毫秒） | number/undefined | / | all | yes -delay | （可选）延迟动画（毫秒） | number/undefined | / | all | yes -direction | 动画的方向，特别适用于重复动画。有效值：正常、反向、交替、交替反向 | string/undefined | / | all | yes -easing | 动画的计时功能。有效值：自定义函数或线性、易进、易出、易入 | string/undefined | / | all | yes -iterationCount | 运行动画的次数，对于循环动画使用无穷大。 | number/undefined | / | all | yes -iterationDelay | 关于动画迭代之间的暂停时间（毫秒） | number/undefined | / | all | yes -transition | 要转换的样式属性，例如不透明度、旋转或字体大小。对多个属性使用数组。 | string/array/undefined | / | all | yes -onAnimationBegin | 启动动画时调用的函数。 | Function/undefined | / | all | yes -onAnimationEnd | 当动画成功完成或取消时调用的函数。函数是用endState参数调用的，请参阅endState.finished以查看动画是否已完成。 | Function/undefined | / | all | yes -onTransitionBegin | 在样式转换开始时调用的函数。使用属性参数调用函数以区分样式。 | Function/undefined | / | all | yes -onTransitionEnd | 当样式转换成功完成或取消时调用的函数。使用属性参数调用函数以区分样式。 | Function/undefined | / | all | yes -useNativeDriver | 是否使用本机或JavaScript动画驱动程序。本机驱动程序可以帮助提高性能，但不能处理所有类型的样式。 | Function/undefined | / | all | yes -isInteraction | 此动画是否在交互管理器上创建“交互控制柄”。 | Boolean | / | all | yes +animation | 动画的名称，请参见下面的可用动画 | string/undefined | No | all | yes +duration | 动画将运行的时间（毫秒） | number/undefined | No | all | yes +delay | （可选）延迟动画（毫秒） | number/undefined | No | all | yes +direction | 动画的方向，特别适用于重复动画。有效值：正常、反向、交替、交替反向 | string/undefined | No | all | yes +easing | 动画的计时功能。有效值：自定义函数或线性、易进、易出、易入 | string/undefined | No | all | yes +iterationCount | 运行动画的次数，对于循环动画使用无穷大。 | number/undefined | No | all | yes +iterationDelay | 关于动画迭代之间的暂停时间（毫秒） | number/undefined | No | all | yes +transition | 要转换的样式属性，例如不透明度、旋转或字体大小。对多个属性使用数组。 | string/array/undefined | No | all | yes +onAnimationBegin | 启动动画时调用的函数。 | Function/undefined | No | all | yes +onAnimationEnd | 当动画成功完成或取消时调用的函数。函数是用endState参数调用的，请参阅endState.finished以查看动画是否已完成。 | Function/undefined | No | all | yes +onTransitionBegin | 在样式转换开始时调用的函数。使用属性参数调用函数以区分样式。 | Function/undefined | No | all | yes +onTransitionEnd | 当样式转换成功完成或取消时调用的函数。使用属性参数调用函数以区分样式。 | Function/undefined | No | all | yes +useNativeDriver | 是否使用本机或JavaScript动画驱动程序。本机驱动程序可以帮助提高性能，但不能处理所有类型的样式。 | Function/undefined | No | all | yes +isInteraction | 此动画是否在交互管理器上创建“交互控制柄”。 | Boolean | No | all | yes diff --git a/zh-cn/react-native-ble-plx.md b/zh-cn/react-native-ble-plx.md index a3b7ebb56e6ffacafacfc6e4ddc7d7985a210f1a..3681f42f1fc260d817b2bb873c4112785db1be2b 100644 --- a/zh-cn/react-native-ble-plx.md +++ b/zh-cn/react-native-ble-plx.md @@ -41,20 +41,19 @@ yarn add @react-native-oh-tpl/react-native-ble-plx > [!WARNING] 使用时 import 的库名不变。 ```js +import React from 'react'; +import { View, Button, Alert } from 'react-native'; import { - BleError, BleErrorCode, BleManager, Device, - State as BluetoothState, - LogLevel, + Service, + Descriptor, type DeviceId, - type TransactionId, type UUID, type Characteristic, - type Base64, - type Subscription -} from 'react-native-ble-plx' +} from 'react-native-ble-plx'; +import Toast from 'react-native-simple-toast'; class BLEServiceInstance { manager: BleManager @@ -66,7 +65,7 @@ class BLEServiceInstance { } scanDevices = async (onDeviceFound: (device: Device) => void, UUIDs: UUID[] | null = null) => { - this.manager.startDeviceScan(UUIDs, null, (error, device) => { + this.manager.startDeviceScan(UUIDs, null, (error: any, device: any) => { if (error) { console.error(error.message) this.manager.stopDeviceScan() @@ -83,11 +82,11 @@ class BLEServiceInstance { this.manager.stopDeviceScan() this.manager .connectToDevice(deviceId) - .then(device => { + .then((device: any) => { this.device = device resolve(device) }) - .catch(error => { + .catch((error: any) => { if (error.errorCode === BleErrorCode.DeviceAlreadyConnected && this.device) { resolve(this.device) } else { @@ -96,51 +95,110 @@ class BLEServiceInstance { } }) }) +} - discoverAllServicesAndCharacteristicsForDevice = async () => - new Promise((resolve, reject) => { - if (!this.device) { - reject(new Error(deviceNotConnectedErrorText)) - return - } - this.manager - .discoverAllServicesAndCharacteristicsForDevice(this.device.id) - .then(device => { - resolve(device) - this.device = device - }) - .catch(error => { - reject(error) - }) - }) +class App extends React.Component { + deviceName: string = 'time' + serviceUuid: string = '00001820-0000-1000-8000-00805F9B34FB' + characteristicUuid: string = '00001820-0000-1000-8000-00805F9B34FB' + descriptorUuid: string = '00002903-0000-1000-8000-00805F9B34FB' - readCharacteristicForDevice = async (serviceUUID: UUID, characteristicUUID: UUID) => - new Promise((resolve, reject) => { - if (!this.device) { - reject(new Error(deviceNotConnectedErrorText)) - return + device?: Device; + + service?: Service; + + characteristic?: Characteristic; + + descriptor?: Descriptor; + + showLog(text: string) { + Toast.show(text, Toast.SHORT); + console.log('bleplx showLog:' + text); + }; + + ble = new BLEServiceInstance((text: string) => { + this.showLog(text); + }); + + enable = () => { + this.ble.manager.enable(); + Toast.show('enable', Toast.SHORT) + } + + disable = () => { + this.ble.manager.disable(); + Toast.show('disable', Toast.SHORT) + } + + startScan = () => { + console.log('startScan'); + Toast.show('开始扫描外设', Toast.LONG) + this.ble.manager.startDeviceScan(null, null, (error: any, device: any) => { + if (device?.name) { + console.log('bleplx: startScan result:' + device?.name); + } + if (device?.name?.toLocaleLowerCase() == this.deviceName) { + if (this.device != null) { + return + } + this.device = device; + this.stopDeviceScan(); + Alert.alert( + '发现外设:' + device.name, + '是否连连接？', + [ + { + text: '取消', + style: 'cancel' + }, + { + text: '连接', + onPress: () => { + this.connectToDevice(); + }, + style: 'destructive' + } + ] + ) } - this.manager - .readCharacteristicForDevice(this.device.id, serviceUUID, characteristicUUID) - .then(characteristic => { - resolve(characteristic) - }) - .catch(error => { - console.error(error.message) - }) }) + } - writeCharacteristicWithResponseForDevice = async (serviceUUID: UUID, characteristicUUID: UUID, time: Base64) => { - if (!this.device) { - console.error(deviceNotConnectedErrorText) - throw new Error(deviceNotConnectedErrorText) + stopDeviceScan = () => { + this.ble.manager.stopDeviceScan(); + Toast.show('stopDeviceScan', Toast.SHORT) + } + + connectToDevice = () => { + if (this.device == null) { + console.log('bleplx: 没有找到指定的连接设备'); + return; } - return this.manager - .writeCharacteristicWithResponseForDevice(this.device.id, serviceUUID, characteristicUUID, time) - .catch(error => { - console.error(error.message) - }) + + console.log('bleplx: 开始连接：' + this.device.id); + Toast.show('开始连接外设', Toast.LONG) + this.ble.manager.connectToDevice(this.device.id).then((device: any) => { + Toast.show('连接成功', Toast.SHORT); + console.log('bleplx:连接成功:' + JSON.stringify(device)); + }).catch((error: any) => { + Toast.show('连接失败', Toast.SHORT); + console.log('bleplx:连接失败：' + error.message); + }); } + + render() { + return ( + + + + + + + ) + } +} + +export default App; ``` ## 使用 Codegen diff --git a/zh-cn/react-native-clippath-capi.md b/zh-cn/react-native-clippath-capi.md index a8b18295271a486b9891060a366a249a3d63ef24..3ef7e92cdf811686ec3cd36b86081bb2ad208439 100644 --- a/zh-cn/react-native-clippath-capi.md +++ b/zh-cn/react-native-clippath-capi.md @@ -239,6 +239,6 @@ ohpm install ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-clippath/blob/capi/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/Only-IceSoul/react-native-clippath/blob/main/LICENSE) ，请自由地享受和参与开源。 --- diff --git a/zh-cn/react-native-drop-shadow.md b/zh-cn/react-native-drop-shadow.md index d6527d36eca01cd2e6aaa3aceff28bde56c041f9..1f2303ef90c7ac3b8884949c9efe4dcf86148a0a 100644 --- a/zh-cn/react-native-drop-shadow.md +++ b/zh-cn/react-native-drop-shadow.md @@ -13,7 +13,7 @@

-> [!TIP] [Github 地址](https://github.com/hoanglam10499/react-native-drop-shadow) +> [!TIP] [Github 地址](https://github.com/hoanglam10499/react-native-drop-shadow/tree/1.0.0) ## 安装与使用 diff --git a/zh-cn/react-native-pull.md b/zh-cn/react-native-pull.md index 0b0102f9e7d7fc9d63ad9c9416bae52f46cb49ee..e944a3df2bdfbad698f9c96cbff5671811b2225d 100644 --- a/zh-cn/react-native-pull.md +++ b/zh-cn/react-native-pull.md @@ -49,90 +49,99 @@ yarn add @react-native-oh-tpl/react-native-pull ```js import React, { Component, useState } from 'react'; import { -StyleSheet, -Text, -View, -ActivityIndicator, -Dimensions, + StyleSheet, + Text, + View, + ActivityIndicator, + Dimensions, } from 'react-native'; -import {PullView} from 'react-native-pull'; +import { PullView } from 'react-native-pull'; + +interface testObjType { + pulling: String, + pullok: String, + pullrelease: String, + pushing: String, + refresh: String, + isPullEnd: String +} const PullViewDemo = () => { -const [count, setCount] = useState(0); -let testObj = { - pulling:null, - pullok:null, - pullrelease:null, - pushing:null, - refresh:null, - isPullEnd:null -}; -const [data, setData] = useState(testObj); -const onPulling = () => { - testObj.pulling='pulling--------->' - setData(testObj) -}; -const onPullOk = () => { - testObj.pullok='pullok--------->' - setData(testObj) + const [count, setCount] = useState(0); + let testObj: testObjType = { + pulling: '', + pullok: '', + pullrelease: '', + pushing: '', + refresh: '', + isPullEnd: '' + }; + const [data, setData] = useState(testObj); + const onPulling = () => { + testObj.pulling = 'pulling--------->' + setData(testObj) + }; + const onPullOk = () => { + testObj.pullok = 'pullok--------->' + setData(testObj) + }; + const onPullRelease = (resolve: any) => { + //do something + testObj.pullrelease = 'pullrelease--------->' + setData(testObj) + setTimeout(() => { + resolve(); + }, 3000); + }; + const onPushing = (gesturePosition: any) => { + testObj.pushing = 'x:' + gesturePosition.x + '------' + 'y：' + gesturePosition.y + setData(testObj) + }; + const topIndicatorRender = (pulling: any, pullok: any, pullrelease: any) => { + if (pulling) { + setCount('下拉刷新pulling...') + } else if (pullok) { + setCount('松开刷新pullok......') + } else if (pullrelease) { + setCount('玩命刷新中pullrelease......') + } + return ( + + + {pulling ? {count} : null} + {pullok ? {count} : null} + {pullrelease ? {count} : null} + + ); + }; + + return ( + + + + 1*************** + onPulling:{testObj.pulling} + 3 + onPullOk:{testObj.pullok} + 5 + onPullRelease:{testObj.pullrelease} + 7 + onPushing:{testObj.pushing} + 9 + + + + ); }; -const onPullRelease = (resolve) => { - //do something - testObj.pullrelease='pullrelease--------->' - setData(testObj) - setTimeout(() => { - resolve(); - }, 3000); - }; - const onPushing = (gesturePosition) => { - testObj.pushing= 'x:' + gesturePosition.x + '------' + 'y：' + gesturePosition.y - setData(testObj) - }; - const topIndicatorRender = (pulling, pullok, pullrelease) => { - if (pulling) { - setCount('下拉刷新pulling...') - } else if (pullok) { - setCount('松开刷新pullok......') - } else if (pullrelease) { - setCount('玩命刷新中pullrelease......') - } - return ( - - - {pulling ? {count} : null} - {pullok ? {count} : null} - {pullrelease ? {count} : null} - - ); - }; - - return ( - - - - 1*************** - onPulling:{testObj.pulling} - 3 - onPullOk:{testObj.pullok} - 5 - onPullRelease:{testObj.pullrelease} - 7 - onPushing:{testObj.pushing} - 9 - - - - ); - > }; export default PullViewDemo; const styles = StyleSheet.create({ container: { @@ -149,7 +158,7 @@ const styles = StyleSheet.create({ > 代码示例 ```jsx -import React, { Component, useState } from 'react'; +import React, { useState } from 'react'; import { StyleSheet, Text, @@ -160,17 +169,26 @@ import { } from 'react-native'; import {PullList} from 'react-native-pull'; +interface testObjType { + pulling: String, + pullok: String, + pullrelease: String, + pushing: String, + refresh: String, + isPullEnd: String +} + const PullListDemo = () => { - let testObj = { - pulling:null, - pullok:null, - pullrelease:null, - pushing:null, - refresh:null, - isPullEnd:null + let testObj: testObjType = { + pulling:'', + pullok:'', + pullrelease:'', + pushing:'', + refresh:'', + isPullEnd:'' }; - const [count, setCount] = useState(0); + const [count, setCount] = useState(0); const [data, setData] = useState(testObj); const [stateList, setStateList] = useState( [ @@ -235,7 +253,7 @@ const PullListDemo = () => { setData(testObj) }; - const onPullRelease = (resolve) => { + const onPullRelease = (resolve: any) => { //do something testObj.pullrelease='pullrelease--------->' setData(testObj) @@ -295,12 +313,12 @@ const PullListDemo = () => { }; - const onPushing = (gesturePosition) => { + const onPushing = (gesturePosition: any) => { testObj.pushing= 'x:' + gesturePosition.x + '------' + 'y：' + gesturePosition.y setData(testObj) }; - const topIndicatorRender = (pulling, pullok, pullrelease) => { + const topIndicatorRender = (pulling: any, pullok: any, pullrelease: any) => { if (pulling) { setCount('当前PullList状态: pulling...') } else if (pullok) { @@ -328,7 +346,7 @@ const PullListDemo = () => { ); } - const renderRow = ({item}) => { + const renderRow = ({item}: any) => { return ( {item.title} @@ -345,11 +363,11 @@ const PullListDemo = () => { } const loadMore = () => { - const list = [] + const list: { id: number; title: string }[] = [] const num = stateList.length for(var i = 0; i < 5; i++) { list.push({ - id: (i + 1 + num) + '', + id: (i + 1 + num), title: `------>Item${(i+num+1)}`, }) } diff --git a/zh-cn/react-native-scrollable-tabview.md b/zh-cn/react-native-scrollable-tabview.md index c0687d9b578ec8c784fee29abdbe345946fa072f..fb3a0e7f521238b57c8abec26ab29a955ba79206 100644 --- a/zh-cn/react-native-scrollable-tabview.md +++ b/zh-cn/react-native-scrollable-tabview.md @@ -12,7 +12,7 @@

-> [!TIP] [Github 地址](https://github.com/itenl/react-native-scrollable-tabview) +> [!TIP] [Github 地址](https://github.com/itenl/react-native-scrollable-tabview/tree/v1.1.7) ## 安装与使用