diff --git a/en/react-native-blob-util.md b/en/react-native-blob-util.md
index 14c6a8aeb7926b6b601203d8dfcc2de562bb5cff..9e5a3ec3b742dd1051f9a97bf915216ddaa7afaf 100644
--- a/en/react-native-blob-util.md
+++ b/en/react-native-blob-util.md
@@ -103,24 +103,25 @@ export default function BlobUtilDemo() {
const writeArrayChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "ascii", false)
- .then((reactNativeBlobUtilWriteStream) => {
- reactNativeBlobUtilWriteStream.encoding = "ascii";
- reactNativeBlobUtilWriteStream.write(["101", "32", "97"]);
+ .then((reactNativeBlobUtilWriteStream:any) => {
+ reactNativeBlobUtilWriteStream.write([101, 32, 97]);
+ reactNativeBlobUtilWriteStream.close();
});
};
const writeChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ==");
+ reactNativeBlobUtilWriteStream.close();
});
};
const closeStream = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
setTimeout(() => {
reactNativeBlobUtilWriteStream.close();
}, 1000);
@@ -206,7 +207,7 @@ export default function BlobUtilDemo() {
BlobUtil
- {result}
+ {result}
@@ -366,8 +367,6 @@ const styles = StyleSheet.create({
fontWeight: "bold",
textAlign: "center",
fontSize: 16,
- ellipsizeMode: "tail",
- numberOfLines: 2,
},
titleArea: {
width: "90%",
diff --git "a/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" "b/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md"
index 1a6583b08c147060540c15e74e52f69147f0cbb1..43bfd7d52166b4139d11f86ebcee83a0f55b1360 100644
--- "a/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md"
+++ "b/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md"
@@ -102,29 +102,31 @@ export default function BlobUtilDemo() {
const writeArrayChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "ascii", false)
- .then((reactNativeBlobUtilWriteStream) => {
- reactNativeBlobUtilWriteStream.encoding = "ascii";
- reactNativeBlobUtilWriteStream.write(["101", "32", "97"]);
+ .then((reactNativeBlobUtilWriteStream:any) => {
+ reactNativeBlobUtilWriteStream.write([101, 32, 97]);
+ reactNativeBlobUtilWriteStream.close();
});
};
const writeChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ==");
+ reactNativeBlobUtilWriteStream.close();
});
};
const closeStream = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
setTimeout(() => {
reactNativeBlobUtilWriteStream.close();
}, 1000);
});
};
+
const readStream = () => {
ReactNativeBlobUtil.fs.readStream(result + "/text.txt", "utf8", 4000, 200);
};
@@ -205,7 +207,7 @@ export default function BlobUtilDemo() {
BlobUtil
- {result}
+ {result}
@@ -365,8 +367,6 @@ const styles = StyleSheet.create({
fontWeight: "bold",
textAlign: "center",
fontSize: 16,
- ellipsizeMode: "tail",
- numberOfLines: 2,
},
titleArea: {
width: "90%",
diff --git a/en/react-native-color-matrix-image-filters.md b/en/react-native-color-matrix-image-filters.md
index 127725cd772f25c377a6e9acb677ab434b79eff4..df8fea1c84a5a7fdd8a0bdd263d4a7f87adec015 100644
--- a/en/react-native-color-matrix-image-filters.md
+++ b/en/react-native-color-matrix-image-filters.md
@@ -48,7 +48,7 @@ import {
Achromatopsia,
Brightness
} from 'react-native-color-matrix-image-filters';
-
+import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
export const ColorMatrixImageFiltersTest = () => {
diff --git a/en/react-native-community-blur.md b/en/react-native-community-blur.md
index a312c6dce5a06a62ea2ce2bf60c39f5e802dd1b2..f1747073f4529b77dbbd5f8022937ae52031ec05 100644
--- a/en/react-native-community-blur.md
+++ b/en/react-native-community-blur.md
@@ -16,7 +16,7 @@
## Installation and Usage
-本库已经适配`C-API版本`从版本`4.4.0-0.1.0`开始的版本为`C-API版本`,`C-API版本`在性能和速度上都优于`ArkTS版本`。
+This library has been adapted to C-API versions starting from version 4.4.0-0.1.0. The C-API versions offer better performance and speed compared to the ArkTS versions.
Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/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.
@@ -121,7 +121,7 @@ export const Blurs = () => {
export const BlurDemo = () => {
const [showBlurs, setShowBlurs] = React.useState(false);
- //'../assets/bgimage.jpeg' 此路径的图片为本地图片,在使用demo时将此图片的路径换为自己本地图片路径
+ //'../assets/bgimage.jpeg' This path refers to a local image. When using the demo, replace this image path with your own local image path.
return (
> PackageProvider::getPackages(Package::Cont
}
```
-### 4.Introducing BlurView Component to ArkTS (使用4.4.0-0.1.0及之后的版本忽略这步配置)
+### 4.Introducing BlurView Component to ArkTS (Skip this configuration step when using version 4.4.0-0.1.0 or later.)
Find `function buildCustomRNComponent()`, which is usually located in `entry/src/main/ets/pages/index.ets` or `entry/src/main/ets/rn/LoadBundle.ets`, and add the following code:
@@ -370,7 +370,7 @@ Check the release version information in the release address of the third-party
#### blurType
-> [!TIP] 如果要使用自适应模糊效果需要配置深色模式[配置文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5#section1421172621111)如果不配置深色模式则自适应模糊效果将没有深色模式,只有浅色模式。
+> [!TIP] To use the adaptive blur effect, you need to configure dark mode. [Configuration Document](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-dark-light-color-adaptation)If dark mode is not configured, the adaptive blur effect will not support dark mode and will only work in light mode.
| Name | Description | Platform | HarmonyOS Support |
| ------------------------ | ------------------------------------------------------------------------------------------------------ |-----------------------| ----------------- |
@@ -409,8 +409,8 @@ Check the release version information in the release address of the third-party
## Known Issues
-- [ ] @react-native-community/blur的 VibrancyView组件未实现HarmonyOS化 [issue#7](https://github.com/react-native-oh-library/react-native-blur/issues/7)
-- [ ] @react-native-community/blur的reducedTransparencyFallbackColor属性未实现 HarmonyOS化[issue#8](https://github.com/react-native-oh-library/react-native-blur/issues/8)
+- [ ] The VibrancyView component from @react-native-community/blur has not been adapted for HarmonyOS. [issue#7](https://github.com/react-native-oh-library/react-native-blur/issues/7)
+- [ ] The reducedTransparencyFallbackColor property of @react-native-community/blur has not been adapted for HarmonyOS.[issue#8](https://github.com/react-native-oh-library/react-native-blur/issues/8)
## Others
diff --git a/en/react-native-device-info.md b/en/react-native-device-info.md
index f43cc72fe76b7a116ecf8a2ae3cab1276c3f26e0..9b28e93874708d18988a0a64b8315d52827689bd 100644
--- a/en/react-native-device-info.md
+++ b/en/react-native-device-info.md
@@ -44,17 +44,113 @@ The following code shows the basic use scenario of the repository:
```js
+import {
+ SafeAreaView,
+ ScrollView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ useColorScheme,
+ View,
+} from 'react-native';
+import React, { useState, useEffect } from 'react';
import DeviceInfo from 'react-native-device-info';
- DeviceInfo.getBundleId();
- DeviceInfo.getVersion();
- DeviceInfo.getReadableVersion();
- DeviceInfo.getBuildNumber();
- DeviceInfo.isTablet();
- DeviceInfo.getApplicationName();
- DeviceInfo.getBrand();
- DeviceInfo.getModel();
- DeviceInfo.getDeviceType();
- DeviceInfo.getDeviceNameSync();
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+function App() {
+ const isDarkMode = useColorScheme() === 'dark';
+ const [deviceInfo, setDeviceInfo] = useState({
+ BundleId: '',
+ Version: '',
+ ReadableVersion: '',
+ BuildNumber: '',
+ Tablet: false,
+ ApplicationName: '',
+ Brand: '',
+ Model: '',
+ DeviceType: '',
+ DeviceNameSync: '',
+ });
+
+ useEffect(() => {
+ const fetchDeviceInfo = async () => {
+ const BundleId = await DeviceInfo.getBundleId();
+ const Version = await DeviceInfo.getVersion();
+ const ReadableVersion = await DeviceInfo.getReadableVersion();
+ const BuildNumber = await DeviceInfo.getBuildNumber();
+ const Tablet = await DeviceInfo.isTablet();
+ const ApplicationName = await DeviceInfo.getApplicationName();
+ const Brand = await DeviceInfo.getBrand();
+ const Model = await DeviceInfo.getModel();
+ const DeviceType = await DeviceInfo.getDeviceType();
+ const DeviceNameSync = await DeviceInfo.getDeviceNameSync();
+
+ setDeviceInfo({
+ BundleId,
+ Version,
+ ReadableVersion,
+ BuildNumber,
+ Tablet,
+ ApplicationName,
+ Brand,
+ Model,
+ DeviceType,
+ DeviceNameSync,
+ });
+ };
+
+ fetchDeviceInfo();
+ }, []);
+
+ const backgroundStyle = {
+ backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+ };
+
+ return (
+
+
+
+
+ Device Information
+ BundleId: {deviceInfo.BundleId}
+ Version: {deviceInfo.Version}
+ ReadableVersion: {deviceInfo.ReadableVersion}
+ BuildNumber: {deviceInfo.BuildNumber}
+ Tablet: {deviceInfo.Tablet ? 'Yes' : 'No'}
+ ApplicationName: {deviceInfo.ApplicationName}
+ Brand: {deviceInfo.Brand}
+ Model: {deviceInfo.Model}
+ DeviceType: {deviceInfo.DeviceType}
+ DeviceNameSync: {deviceInfo.DeviceNameSync}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ sectionTitle: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ marginBottom: 16,
+ },
+ infoText: {
+ fontSize: 16,
+ marginBottom: 8,
+ },
+});
+
+export default App;
+
```
## Use Codegen
@@ -173,90 +269,90 @@ Open `entry/src/main/module.json5`, add the following permission:
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| getAndroidId |Gets the ANDROID_ID. See API documentation for appropriate use. | Promise| yes | Android | no |
-| getApiLevel | Gets the API level. | Promise| yes | Android | yes |
-| getApplicationName | Gets the application name. | string | yes | IOS/Android/Windows/visionOS | yes |
-| getAvailableLocationProviders | Returns an object of platform-specfic location providers/servcies, with value whether or not they are currently available.boolean | Promise
) : (
- No image generated
+ 未生成图片
)}
{croppedImageURI}
-
diff --git a/en/react-native-maps.md b/en/react-native-maps.md
index e2377c4400a37d3698322cdaee1e04e06d47abfd..8b2ad034eba017753a82c21c985095011d12a094 100644
--- a/en/react-native-maps.md
+++ b/en/react-native-maps.md
@@ -561,9 +561,9 @@ Open `entry/src/main/resources/base/element/string.json` and add the following:
| mapPadding | Adds custom padding to each side of the map. Useful when map elements/markers are obscured. | EdgePadding | | no | ios/android | yes |
| paddingAdjustmentBehavior | Indicates how/when to affect padding with safe area insets (`GoogleMaps` in iOS only) | 'always' \ 'automatic' \ 'never' | 'never' | no | ios/android | no |
| liteMode | Enable [lite mode](https://developers.google.com/maps/documentation/android-sdk/lite#overview_of_lite_mode). **Note**: Android only. | Boolean | false | no | android | no |
-| mapType | The map type to be displayed. | String | "standard" | | ios/android | partially |
+| mapType | The map type to be displayed. | String | "standard" | | ios/android | partially(Support "none", "standard", "terrain") |
| customMapStyle | Adds custom styling to the map component. | Array | | no | ios/android | yes |
-| userInterfaceStyle | Sets the map to the style selected. Default is whatever the system settings is. **Note:** iOS Maps only (aka MapKit). | 'light'/'dark' | | no | ios/android | yes |
+| userInterfaceStyle | Sets the map to the style selected. Default is whatever the system settings is. **Note:** iOS Maps only (aka MapKit). | 'light'/'dark' | 'light' | no | ios/android | yes |
| showsUserLocation | If `true` the users location will be shown on the map. **NOTE**: You need runtime location permissions prior to setting this to true, otherwise it is going to _fail silently_! Checkout the excellent [react-native-permissions](https://github.com/zoontek/react-native-permissions) for this. | Boolean | false | no | ios/android | yes |
| userLocationPriority | Set power priority of user location tracking. See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html). **Note:** Android only. | 'balanced' / 'high' / 'low' / 'passive' | 'high' | no | android | no |
| userLocationUpdateInterval | Interval of user location updates in milliseconds. See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html). **Note:** Android only. | Number | 5000 | no | android | no |
@@ -580,7 +580,7 @@ Open `entry/src/main/resources/base/element/string.json` and add the following:
| showsIndoors | A Boolean indicating whether indoor maps should be enabled. | Boolean | true | no | ios/android | no |
| showsIndoorLevelPicker | A Boolean indicating whether indoor level picker should be enabled. **Note:** Google Maps only (either Android or iOS with `PROVIDER_GOOGLE`). | Boolean | false | no | ios/android | no |
| zoomEnabled | If `false` the user won't be able to pinch/zoom the map. | Boolean | true | no | ios/android | yes |
-| zoomTapEnabled | If `false` the user won't be able to double tap to zoom the map. **Note:** But it will greatly decrease delay of tap gesture recognition. **Note:** Google Maps on iOS only | Boolean | | no | ios/android | yes |
+| zoomTapEnabled | If `false` the user won't be able to double tap to zoom the map. **Note:** But it will greatly decrease delay of tap gesture recognition. **Note:** Google Maps on iOS only | Boolean | true | no | ios/android | yes |
| zoomControlEnabled | If `false` the zoom control at the bottom right of the map won't be visible **Note:** Android only. | Boolean | true | no | android | yes |
| minZoomLevel | Minimum zoom value for the map, must be between 0 and 20. **Note:** Deprecated on Apple Maps. Use cameraZoomRange instead. | Number | 0 | no | ios/android | yes |
| maxZoomLevel | Maximum zoom value for the map, must be between 0 and 20. **Note:** Deprecated on Apple Maps. Use cameraZoomRange instead. | Number | 20 | no | ios/android | yes |
@@ -645,10 +645,10 @@ Note: The double-tap zoom-in function on HarmonyOS is enabled by **zoomEnabled**
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | -------- | ----------- | ----------------- |
| title | The title of the marker. This is only used if the component has no children that are a ``, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided. | String | | no | ios/android | yes |
| description | The description of the marker. This is only used if the component has no children that are a ``, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided. | String | | no | ios/android | yes |
-| image | A custom image to be used as the marker's icon. Only local image resources are allowed to be used. | `ImageSource`\* | | no | ios/android | yes |
+| image | A custom image to be used as the marker's icon. Only local image resources are allowed to be used. | String | | no | ios/android | yes |
| icon | Marker icon to render (equivalent to `icon` property of GMSMarker Class). Only local image resources are allowed to be used. **Note:** Google maps only! | `ImageSource`\* | | no | ios/android | no |
| pinColor | If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color. Ignored if a custom marker is being used. | Color | | no | ios/android | no |
-| coordinate | The coordinate for the marker. | LatLng | | yes | ios/android | yes |
+| coordinate | The coordinate for the marker. | dynamic | | yes | ios/android | yes |
| centerOffset | The offset (in points) at which to display the view. | Point | (0, 0) | no | ios/android | no |
| calloutOffset | The offset (in points) at which to place the callout bubble. | Point | (0, 0) | no | ios/android | no |
| anchor | Sets the anchor point for the marker. | Point | (0.5, 1) | no | ios/android | yes |
@@ -694,14 +694,14 @@ Note: The double-tap zoom-in function on HarmonyOS is enabled by **zoomEnabled**
| coordinates | An array of coordinates to describe the polyline | Array | | yes | ios/android | yes |
| strokeWidth | The stroke width to use for the path. | Number | 1 | no | ios/android | yes |
| strokeColor | The stroke color to use for the path. | String | #000, rgba(r,g,b,0.5) | no | ios/android | yes |
-| strokeColors | The stroke colors to use for the path (iOS only). Must be the same length as `coordinates`. | Array | | no | ios/android | yes |
+| strokeColors | The stroke colors to use for the path (iOS only). Must be the same length as `coordinates`. | dynamic | | no | ios/android | yes |
| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | String | round | no | ios/android | yes |
| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | String | round | no | ios/android | yes |
| miterLimit | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. | Number | | no | ios/android | no |
-| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | | no | ios/android | yes |
+| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | false | no | ios/android | yes |
| lineDashPhase | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. | Number | 0 | no | ios/android | no |
| lineDashPattern | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. | Array | | no | ios/android | yes |
-| tappable | Boolean to allow a polyline to be tappable and use the onPress function. | Bool | | no | ios/android | yes |
+| tappable | Boolean to allow a polyline to be tappable and use the onPress function. | Bool | false | no | ios/android | yes |
Note: **lineJoin** on HarmonyOS supports the following string values:
@@ -725,7 +725,7 @@ Note: **lineJoin** on HarmonyOS supports the following string values:
| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | String | round | no | ios/android | no |
| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | String | round | no | ios/android | yes |
| miterLimit | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. | Number | | no | ios/android | no |
-| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | | no | ios/android | yes |
+| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | false | no | ios/android | yes |
| lineDashPhase | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. | Number | 0 | no | ios/android | no |
| lineDashPattern | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. | Array | | no | ios/android | yes |
| tappable | Boolean to allow a polygon to be tappable and use the onPress function. | Bool | false | no | ios/android | yes |
@@ -767,11 +767,11 @@ Note: **lineJoin** on HarmonyOS supports the following string values:
| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ------- | -------- | ----------- | ----------------- |
-| image | A custom image to be used as the overlay. Only required local image resources and uri (as for images located in the net) are allowed to be used. | ImageSource | | yes | ios/android | yes |
+| image | A custom image to be used as the overlay. Only required local image resources and uri (as for images located in the net) are allowed to be used. | String | | yes | ios/android | yes |
| bounds | The coordinates for the image (bottom-left corner, top-right corner). ie.`[[lat, long], [lat, long]]` | Array | | yes | ios/android | yes |
| bearing | `Google Maps API only` The bearing in degrees clockwise from north. Values outside the range [0, 360) will be normalized. | Number | 0 | no | ios/android | yes |
| tappable | `Android only` Boolean to allow an overlay to be tappable and use the onPress function. | Bool | false | no | ios/android | yes |
-| opacity | `Google maps only` The opacity of the overlay. | Number | 1.0 | no | ios/android | yes |
+| opacity | `Google maps only` The opacity of the overlay. | Float | 1.0 | no | ios/android | yes |
### Static Methods
@@ -833,8 +833,8 @@ Note: **lineJoin** on HarmonyOS supports the following string values:
| color | The color to use for points. | String | `marker-color` property in GeoJson | no | ios/android | no |
| lineDashPhase | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. | Number | | no | ios | no |
| lineDashPattern | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. | Array | | no | ios/android | yes |
-| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | 'butt' / 'round' / 'square' | | no | ios/android | yes |
-| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | 'miter' / 'round' / 'bevel' | | no | ios/android | yes |
+| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | 'butt' / 'round' / 'square' | 'round' | no | ios/android | yes |
+| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | 'miter' / 'round' / 'bevel' | 'round' | no | ios/android | yes |
| miterLimit | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. | Number | | no | ios/android | no |
| zIndex | Layer level of the z-index value | Number | | no | ios/android | yes |
| onPress | returns the selected overlay value with the onPress functionality | Function | | no | ios/android | yes |
@@ -858,7 +858,7 @@ Note: **lineJoin** on HarmonyOS supports the following string values:
| -------- | ----------------------------------------------------------------- | --------------------- | ------- | -------- | ----------- | ----------------- |
| points | Array of heatmap entries to apply towards density. | Array | | no | ios/android | no |
| radius | The radius of the heatmap points in pixels, between 10 and 50. | Number | 20 | no | ios/android | no |
-| opacity | The opacity of the heatmap. | Number | 0.7 | no | ios/android | no |
+| opacity | The opacity of the heatmap. | Float | 0.7 | no | ios/android | no |
| gradient | Heatmap gradient configuration (See below for _Gradient Config_). | Object | | no | ios/android | no |
#### Gradient Config
diff --git a/en/react-native-reanimated-carousel.md b/en/react-native-reanimated-carousel.md
index 964fab0e7adf1c253bce0b8bdea2ade19afca292..f4f79176bd5181c00d7fb9ad7fa1b580aef1b62b 100644
--- a/en/react-native-reanimated-carousel.md
+++ b/en/react-native-reanimated-carousel.md
@@ -36,6 +36,8 @@ yarn add react-native-reanimated-carousel@3.5.1
The following code shows the basic use scenario of the repository:
+[!TIP] This example depends on react-native-gesture-handler、react-native-reanimated library,refer to[@react-native-oh-tpl/react-native-gesture-handler docs](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-reanimated docs](/zh-cn/react-native-reanimated.md)Introduce it。
+
```ts
import React, { useState, useRef } from "react";
import { ScrollView } from "react-native-gesture-handler";
@@ -194,39 +196,39 @@ This document is verified based on the following versions:
### Basic Props
-| Name | Description | Required | Default | Type | Platform | HarmonyOS Support |
-| --- | --- | --- | --- | --- | --- | --- |
-| data | Carousel items data set | yes | | T[] | All | yes |
-| renderItem | Render carousel item | yes | | (info: { item: T, index: number, animationValue: SharedValue\ }) => React.ReactElement | All | yes |
-| defaultScrollOffsetValue | The default animated value of the carousel. | no | useSharedValue(0) | boolean | All | yes |
-| autoFillData | Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1];[1, 2] => [1, 2, 1, 2]) | no | true | boolean | All | yes |
-| vertical | Layout items vertically instead of horizontally | no | false | boolean | All | yes |
-| width | Specified carousel item width | `vertical` no `horizontal` yes | '100%' | number \| undefined | All | yes |
-| height | Specified carousel item height | `vertical` yes `horizontal` no | '100%' | number \| undefined | All | yes |
-| mode | Carousel Animated transitions | no | default | 'horizontal-stack'\|'vertical-stack'\|'parallax' | All | yes |
-| modeConfig | Stack layout animation style. Different modes correspond to different configurations | no | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | | All | yes |
-| style | Carousel container style | no | {} | ViewStyle | All | yes |
-| defaultIndex | Default index | no | 0 | number | All | yes |
-| autoPlay | Auto play | no | false | boolean | All | yes |
-| autoPlayReverse | Auto play reverse playback | no | false | boolean | All | yes |
-| autoPlayInterval | Auto play playback interval | no | 1000 | number | All | yes |
-| scrollAnimationDuration | Time a scroll animation takes to finish | no | 500 | number | All | yes |
-| loop | Carousel loop playback | no | true | boolean | All | yes |
-| testID | Used to locate this view in end-to-end tests | no | | string | All | yes |
-| onSnapToItem | Callback fired when navigating to an item | no | | (index: number) => void | All | yes |
-| onScrollBegin | Callback fired when scroll begin | no | | () => void | All | yes |
-| onScrollEnd | Callback fired when scroll end | no | | (index: number) => void | All | yes |
-| withAnimation | Specifies the scrolling animation effect | no | | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | All | yes |
-| panGestureHandlerProps | PanGestureHandler props | no | {} | Omit,'onHandlerStateChange'> | All | yes |
-| windowSize | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events | no | 0 | number | All | yes |
-| onProgressChange | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) | no | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | All | yes |
-| pagingEnabled | When true, the scroll view stops on multiples of the scroll view's size when scrolling | no | true | boolean | All | yes |
-| overscrollEnabled | If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false) | no | true | boolean | All | yes |
-| snapEnabled | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | no | true | boolean | All | yes |
-| enabled | when false, Carousel will not respond to any gestures | no | true | boolean | All | yes |
-| customConfig | Custom carousel config | no | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | All | yes |
-| customAnimation | Custom animations | no | | (value: number) => Animated.AnimatedStyleProp | All | yes |
-| maxScrollDistancePerSwipe | Maximum offset value for one scroll. If `props.vertical = true`, this will be `maxScrollDistancePerSwipeY`. If `props.vertical = false`, this will be `maxScrollDistancePerSwipeX`. | no | | number | All | yes |
+| Name | Description | Required | Default | Type | Platform | HarmonyOS Support |
+| ------------------------- | ------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------------- |
+| data | Carousel items data set | yes | | T[] | All | yes |
+| renderItem | Render carousel item | yes | | (info: { item: T, index: number, animationValue: SharedValue\ }) => React.ReactElement | All | yes |
+| defaultScrollOffsetValue | The default animated value of the carousel. | no | useSharedValue(0) | boolean | All | yes |
+| autoFillData | Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1];[1, 2] => [1, 2, 1, 2]) | no | true | boolean | All | yes |
+| vertical | Layout items vertically instead of horizontally | no | false | boolean | All | yes |
+| width | Specified carousel item width | `vertical` no `horizontal` yes | '100%' | number \| undefined | All | yes |
+| height | Specified carousel item height | `vertical` yes `horizontal` no | '100%' | number \| undefined | All | yes |
+| mode | Carousel Animated transitions | no | default | 'horizontal-stack'\|'vertical-stack'\|'parallax' | All | yes |
+| modeConfig | Stack layout animation style. Different modes correspond to different configurations | no | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | | All | yes |
+| style | Carousel container style | no | {} | ViewStyle | All | yes |
+| defaultIndex | Default index | no | 0 | number | All | yes |
+| autoPlay | Auto play | no | false | boolean | All | yes |
+| autoPlayReverse | Auto play reverse playback | no | false | boolean | All | yes |
+| autoPlayInterval | Auto play playback interval | no | 1000 | number | All | yes |
+| scrollAnimationDuration | Time a scroll animation takes to finish | no | 500 | number | All | yes |
+| loop | Carousel loop playback | no | true | boolean | All | yes |
+| testID | Used to locate this view in end-to-end tests | no | | string | All | yes |
+| onSnapToItem | Callback fired when navigating to an item | no | | (index: number) => void | All | yes |
+| onScrollBegin | Callback fired when scroll begin | no | | () => void | All | yes |
+| onScrollEnd | Callback fired when scroll end | no | | (index: number) => void | All | yes |
+| withAnimation | Specifies the scrolling animation effect | no | | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | All | yes |
+| panGestureHandlerProps | PanGestureHandler props | no | {} | Omit,'onHandlerStateChange'> | All | yes |
+| windowSize | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events | no | 0 | number | All | yes |
+| onProgressChange | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) | no | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | All | yes |
+| pagingEnabled | When true, the scroll view stops on multiples of the scroll view's size when scrolling | no | true | boolean | All | yes |
+| overscrollEnabled | If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false) | no | true | boolean | All | yes |
+| snapEnabled | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | no | true | boolean | All | yes |
+| enabled | when false, Carousel will not respond to any gestures | no | true | boolean | All | yes |
+| customConfig | Custom carousel config | no | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | All | yes |
+| customAnimation | Custom animations | no | | (value: number) => Animated.AnimatedStyleProp | All | yes |
+| maxScrollDistancePerSwipe | Maximum offset value for one scroll. If `props.vertical = true`, this will be `maxScrollDistancePerSwipeY`. If `props.vertical = false`, this will be `maxScrollDistancePerSwipeX`. | no | | number | All | yes |
### `modeConfig` Parallax
diff --git a/en/react-native-reanimated-table.md b/en/react-native-reanimated-table.md
index 8c38670d329cc026c2cdb2795aa6b96de46436a0..7a3bb7a14d314378be965e42b57ddb7f29f1effa 100644
--- a/en/react-native-reanimated-table.md
+++ b/en/react-native-reanimated-table.md
@@ -25,7 +25,7 @@ Go to the project directory and execute the following instruction:
#### npm
```bash
-npm install react-native-reanimated-table@^0.0.2
+npm install react-native-reanimated-table@0.0.2
```
#### yarn
@@ -111,13 +111,13 @@ Please check for details [react-native-reanimated-table](https://github.com/doho
| Name | Description | **Type** | Required | Platform | HarmonyOS Support |
| ------------------------- | ------------------------------------------------------------ | -------- | ----------- | ----------------- | ----------------- |
| data | Table data. | Array | Yes | All | Yes |
-| style | Container style. | Style | Yes | All | Yes |
-| borderStyle | Table border line width and color. | Object | Yes | All | Yes |
-| textStyle | Cell font style. | Style | Yes | All | Yes |
-| flexArr | Flex value per column. | Array | Yes | All | Yes |
-| widthArr | Width per column. | Array | Yes | All | Yes |
-| heightArr | Height per line. | Array | Yes | All | Yes |
-| ...props | more props | any | Yes | All | Yes |
+| style | Container style. | Style | No | All | Yes |
+| borderStyle | Table border line width and color. | Object | No | All | Yes |
+| textStyle | Cell font style. | Style | No | All | Yes |
+| flexArr | Flex value per column. | Array | No | All | Yes |
+| widthArr | Width per column. | Array | No | All | Yes |
+| heightArr | Height per line. | Array | No | All | Yes |
+| ...props | more props | any | No | All | Yes |
## Others
diff --git a/en/react-native-sensors.md b/en/react-native-sensors.md
index edc0dc20ae78a4a3fc4b43b5eebc05c4a8b40581..3faa43dbfb121951ea79a9df6e07886307f7861b 100644
--- a/en/react-native-sensors.md
+++ b/en/react-native-sensors.md
@@ -39,47 +39,101 @@ react-native-sensors is used as an example.
> [!WARNING] The name of the imported repository remains unchanged.
```js
-import {
- accelerometer,
- gyroscope,
- setUpdateIntervalForType,
- magnetometer,
- barometer,
- orientation,
- gravity,
-} from "react-native-sensors";
-
-//accelerometer accelerometer: Observable<{x: number, y: number, z: number, timestamp: string}>
-accelerometer.subscribe(({ x, y, z, timestamp }) =>
- console.log("accelerometer", { x, y, z, timestamp })
-);
-
-//gyroscope gyroscope: Observable<{x: number, y: number, z: number, timestamp: string}>
-gyroscope
- .pipe(filter((speed) => speed.x > 1))
- .subscribe(({ x, y, z, timestamp }) =>
- console.log("gyroscope", { x, y, z, timestamp })
- );
-
-//magnetometer magnetometer: Observable<{x: number, y: number, z: number, timestamp: string}>
-magnetometer.subscribe(({ x, y, z, timestamp }) =>
- console.log("magnetometer", { x, y, z, timestamp })
-);
-
-//barometer barometer: Observable<{pressure: number}>
-barometer.subscribe(({ pressure }) => console.log("barometer", { pressure }));
-
-//orientation orientation: Observable<{x: number, y: number, z: number, timestamp: string}>
-orientation.subscribe(({ x, y, z, timestamp }) =>
- console.log("orientation", { x, y, z, timestamp })
-);
-
-//gravity gravity: Observable<{x: number, y: number, z: number, timestamp: string}>
-gravity.subscribe(({ x, y, z, timestamp }) =>
- console.log("gravity", { x, y, z, timestamp })
-);
-// setUpdateIntervalForType(type: string, interval: number)
-setUpdateIntervalForType(SensorTypes.accelerometer, 100);
+import React from "react";
+import { Alert } from "react-native";
+import { Subscription } from "rxjs";
+import { Button, View, Text, TextInput, StyleSheet } from 'react-native';
+import { accelerometer, gyroscope, magnetometer, barometer, orientation, gravity, setUpdateIntervalForType, setLogLevelForType } from 'react-native-sensors';
+export const App = () => {
+ const [value, setValue] = React.useState('15');
+ const [sensors, setSensorsValue] = React.useState('');
+ const [IsProintLog, setIsProintLog] = React.useState(true);
+ const setInterVal = () => {
+ if(!sensors) return
+ if (IsProintLog) {
+ setUpdateIntervalForType(sensors, value);
+ setIsProintLog(false)
+ let sensorsSubscription: Subscription;
+ switch (sensors) {
+ case 'accelerometer':
+ sensorsSubscription = accelerometer.subscribe();
+ break;
+ case 'gyroscope':
+ sensorsSubscription = gyroscope.subscribe();
+ break;
+ case 'magnetometer':
+ sensorsSubscription = magnetometer.subscribe();
+ break;
+ case 'barometer':
+ sensorsSubscription = barometer.subscribe();
+ break;
+ case 'orientation':
+ sensorsSubscription = orientation.subscribe();
+ break;
+ case 'gravity':
+ sensorsSubscription = gravity.subscribe();
+ break;
+ default:
+ }
+ const timer = setTimeout(() => {
+ sensorsSubscription.unsubscribe();
+ clearTimeout(timer)
+ setIsProintLog(true)
+ }, 5000);
+ }
+ }
+ const setLogLevel0 = () => {
+ setLogLevelForType(sensors, 0)
+ }
+ const setLogLevel1 = () => {
+ setLogLevelForType(sensors, 1)
+ }
+ const setLogLevel2 = () => {
+ setLogLevelForType(sensors, 2)
+ }
+ const handleChangeText = (text:string) => {
+ if (!text) {
+ Alert.alert('Please enter the interval time and it cannot be empty!');
+ return
+ }
+ const numericValue = text.replace(/[^0-9]/g, "");
+ setValue(numericValue);
+ }
+ const styles = StyleSheet.create({
+ divider: {
+ height: 1,
+ backgroundColor: '#CCCCCC',
+ marginVertical: 5,
+ }
+ })
+ return (
+
+ Operation process: 1. Enter the interval time 2. Select the sensor type 3. Select the output log level 4. Click the log print button. Please ensure that the equipment is supported
+
+ setUpdateIntervalForType Set the data collection frequency
+
+ { setSensorsValue('accelerometer') }} title="accelerometer">
+
+ { setSensorsValue('gyroscope') }} title="gyroscope">
+
+ { setSensorsValue('magnetometer') }} title="magnetometer">
+
+ { setSensorsValue('barometer') }} title="barometer">
+
+ { setSensorsValue('orientation') }} title="orientation">
+
+ { setSensorsValue('gravity') }} title="gravity">
+
+
+
+
+
+
+
+
+ )
+}
+export default App;
```
## 2. Manual Link
diff --git a/en/react-native-simple-toast.md b/en/react-native-simple-toast.md
index 8aaff5bf8156d2414ccda188c23b69ea53730549..2539f1f51a000d51c6753bb501325389704856eb 100644
--- a/en/react-native-simple-toast.md
+++ b/en/react-native-simple-toast.md
@@ -57,9 +57,10 @@ import {
import Toast from 'react-native-simple-toast';
import { useState } from 'react';
-export default function App() {
- const [modalVisible, setModalVisible] = useState(false);
+
+const ToastTest = () => {
+ const [modalVisible, setModalVisible] = useState(false);
return (
<>
-
- {
- Toast.show('This is a toast.', Toast.SHORT);
- }}
- />
- {
- Toast.show('Tap to dismiss toast.', Toast.LONG, {
- tapToDismissEnabled: true,
- });
- }}
- />
-
-
- >
+
+ {
+ Toast.show('This is a toast.', Toast.SHORT);
+ }}
+ />
+
+ {
+ Toast.show('Tap to dismiss toast.', Toast.LONG, {
+ tapToDismissEnabled: true,
+ });
+ }}
+ />
+
+
+ >
);
-}
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: 16,
+ backgroundColor: '#fff',
+ },
+ centeredView: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'rgba(0,0,0,0.3)',
+ },
+ modalView: {
+ margin: 20,
+ backgroundColor: 'white',
+ borderRadius: 8,
+ padding: 32,
+ alignItems: 'center',
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.25,
+ shadowRadius: 4,
+ elevation: 5,
+ },
+ modalText: {
+ marginBottom: 16,
+ textAlign: 'center',
+ fontSize: 18,
+ color: '#333',
+ },
+ button: {
+ borderRadius: 8,
+ paddingVertical: 10,
+ paddingHorizontal: 20,
+ elevation: 2,
+ backgroundColor: '#2196F3',
+ },
+ buttonClose: {
+ backgroundColor: '#f44336',
+ marginTop: 12,
+ },
+ textStyle: {
+ color: 'white',
+ fontWeight: 'bold',
+ textAlign: 'center',
+ },
+});
+
+export default ToastTest;
```
## Constraints
diff --git a/en/react-native-skia.md b/en/react-native-skia.md
index c0e8ae649c75c5522db4727008fb596f59299951..68f16a2f4628c7515b3f975299afaef26790758e 100644
--- a/en/react-native-skia.md
+++ b/en/react-native-skia.md
@@ -241,7 +241,9 @@ Then build and run the code.
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.
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-skia Releases](https://github.com/react-native-oh-library/react-native-skia/releases)
+[!TIP] [skia Official ducoments](https://shopify.github.io/react-native-skia/docs/getting-started/installation)
+
+[!TIP]Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-skia Releases](https://github.com/react-native-oh-library/react-native-skia/releases)
## Components
@@ -257,7 +259,7 @@ Check the release version information in the release address of the third-party
> | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -------- | ----------- | ----------------- |
> | style | View style | ViewStyle | no | android/ios | yes |
> | ref | Reference to the SkiaView object | Ref | no | android/ios | yes |
-> | mode | By default, the canvas is only updated when the drawing tree or animation values change. With mode="continuous", the canvas will redraw on every frame | default/continuous | no | android/ios | yes |
+> | mode | By default, the canvas is only updated when the drawing tree or animation values change. With mode="continuous", the canvas will redraw on every frame | default \| continuous | no | android/ios | yes |
> | onSize | Reanimated value to which the canvas size will be assigned | SharedValue | no | android/ios | yes |
> | onLayout | Invoked on mount and on layout changes | NativeEvent | no | android/ios | yes |
@@ -292,7 +294,7 @@ Check the release version information in the release address of the third-party
| end | Trims the end of the path. Value is in the range `[0, 1]` (default is 1). | number | no | android/ios | yes |
| stroke | Turns this path into the filled equivalent of the stroked path. This will fail if the path is a hairline. `StrokeOptions` describes how the stroked path should look. It contains three properties: `width`, `strokeMiterLimit` and, `precision` | StrokeOptions | no | android/ios | yes |
-### Polygons
+### Rect
#### Properties
@@ -302,12 +304,67 @@ Check the release version information in the release address of the third-party
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ------ | ------------------------ | ---------------- | -------- | ----------- | ----------------- |
-| x | X coordinate. | SkPath`or`string | no | android/ios | yes |
-| y | Y coordinate. | number | no | android/ios | yes |
-| width | Width of the rectangle. | number | no | android/ios | yes |
-| height | Height of the rectangle. | StrokeOptions | no | android/ios | yes |
+| x | X coordinate. | number | yes | android/ios | yes |
+| y | Y coordinate. | number | yes | android/ios | yes |
+| width | Width of the rectangle. | number | yes | android/ios | yes |
+| height | Height of the rectangle. | number | yes | android/ios | yes |
+
+### RoundedRect
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ------ | -------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- |
+| x | X coordinate. | SkPath`or`string | yes | android/ios | yes |
+| y | Y coordinate. | number | yes | android/ios | yes |
+| width | Width of the rectangle. | number | yes | android/ios | yes |
+| height | Height of the rectangle. | StrokeOptions | yes | android/ios | yes |
+| r | Corner radius. Defaults to `ry` if specified or 0. | number`or`Vector | no | android/ios | yes |
+
+### DiffRect
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ----- | ---------------- | ------------- | -------- | ----------- | ----------------- |
+| outer | Outer rectangle. | Rect \| RRect | yes | android/ios | yes |
+| inner | Inner rectangle. | Rect \| RRect | yes | android/ios | yes |
+
+### Line
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ---- | ------------ | ----- | -------- | ----------- | ----------------- |
+| p1 | Start point. | Point | yes | android/ios | yes |
+| p2 | End point. | Point | yes | android/ios | yes |
-### Ellipses
+### Points
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ------ | ------------------------------------------------------------ | --------- | -------- | ----------- | ----------------- |
+| points | Points to draw. | Point | yes | android/ios | yes |
+| mode | How should the points be connected. Can be `points` (no connection), `lines` (connect pairs of points), or `polygon` (connect lines). Default is `points`. | PointMode | yes | android/ios | yes |
+
+### Circle
#### Properties
@@ -317,9 +374,24 @@ Check the release version information in the release address of the third-party
| Name | Description | Type | Required | Platfor | HarmonyOS Support |
| ---- | ------------ | ------ | -------- | ----------- | ----------------- |
-| cx | Start point. | number | no | android/ios | yes |
-| cy | End point. | number | no | android/ios | yes |
-| r` | Radius. | number | no | android/ios | yes |
+| cx | Start point. | number | yes | android/ios | yes |
+| cy | End point. | number | yes | android/ios | yes |
+| r | Radius. | number | yes | android/ios | yes |
+
+### Oval
+
+#### Properties
+
+> [!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 | Type | Required | Platfor | HarmonyOS Support |
+| ------ | --------------------------------------- | ------ | -------- | ----------- | ----------------- |
+| x | X coordinate of the bounding rectangle. | number | yes | android/ios | yes |
+| y | Y coordinate of the bounding rectangle. | number | yes | android/ios | yes |
+| width | Width of the bounding rectangle. | number | yes | android/ios | yes |
+| height | Height of the bounding rectangle. | number | yes | android/ios | yes |
### Atlas
@@ -331,11 +403,11 @@ Check the release version information in the release address of the third-party
| Name | Type | Description | Required | android/ios | HarmonyOS Support |
| ---------- | ----------------- | ------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
-| image | `SkImage or null` | Altas: image containing the sprites. | no | android/ios | yes |
-| sprites | `SkRect[]` | locations of sprites in atlas. | no | android/ios | yes |
-| transforms | `RSXform[]` | Rotation/scale transforms to be applied for each sprite. | no | android/ios | yes |
-| colors | `SkColor[]` | Optional. Color to blend the sprites with. | yes | android/ios | yes |
-| blendMode | `BlendMode` | Optional. Blend mode used to combine sprites and colors together.\*\*\*\* | yes | android/ios | yes |
+| image | `SkImage or null` | Altas: image containing the sprites. | yes | android/ios | yes |
+| sprites | `SkRect[]` | locations of sprites in atlas. | yes | android/ios | yes |
+| transforms | `RSXform[]` | Rotation/scale transforms to be applied for each sprite. | yes | android/ios | yes |
+| colors | `SkColor[]` | Optional. Color to blend the sprites with. | no | android/ios | yes |
+| blendMode | `BlendMode` | Optional. Blend mode used to combine sprites and colors together. | no | android/ios | yes |
### Vertices
@@ -347,12 +419,12 @@ Check the release version information in the release address of the third-party
| Name | Type | Description | Required | android/ios | HarmonyOS Support |
| --------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
-| vertices | `Point[]` | Vertices to draw | no | android/ios | yes |
-| mode | `VertexMode` | Can be `triangles`, `trianglesStrip` or `triangleFan`. Default is `triangles` | yes | android/ios | yes |
-| indices | `number[]` | Indices of the vertices that form the triangles. If not provided, the order of the vertices will be taken. Using this property enables you not to duplicate vertices. | yes | android/ios | yes |
-| textures | `Point[]`. | [Texture mapping](https://en.wikipedia.org/wiki/Texture_mapping). The texture is the shader provided by the paint. | no | android/ios | yes |
-| colors | `string[]` | Optional colors to be associated to each vertex | yes | android/ios | yes |
-| blendMode | `BlendMode` | If `colors` is provided, colors are blended with the paint using the blend mode. Default is `dstOver` if colors are provided, `srcOver` if not. | yes | android/ios | yes |
+| vertices | `Point[]` | Vertices to draw | yes | android/ios | yes |
+| mode | `VertexMode` | Can be `triangles`, `trianglesStrip` or `triangleFan`. Default is `triangles` | no | android/ios | yes |
+| indices | `number[]` | Indices of the vertices that form the triangles. If not provided, the order of the vertices will be taken. Using this property enables you not to duplicate vertices. | no | android/ios | yes |
+| textures | `Point[]`. | [Texture mapping](https://en.wikipedia.org/wiki/Texture_mapping). The texture is the shader provided by the paint. | yes | android/ios | yes |
+| colors | `string[]` | Optional colors to be associated to each vertex | no | android/ios | yes |
+| blendMode | `BlendMode` | If `colors` is provided, colors are blended with the paint using the blend mode. Default is `dstOver` if colors are provided, `srcOver` if not. | no | android/ios | yes |
### Patch
@@ -364,12 +436,86 @@ Check the release version information in the release address of the third-party
| Name | Type | Description | Required | android/ios | HarmonyOS Support |
| --------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- |
-| cubics | `CubicBezier[4]` | Specifies four cubic Bezier starting at the top-left corner, in clockwise order, sharing every fourth point. The last cubic Bezier ends at the first point. | no | android/ios | yes |
-| textures | `Point[]`. | [Texture mapping](https://en.wikipedia.org/wiki/Texture_mapping). The texture is the shader provided by the paint | no | android/ios | yes |
-| colors | `string[]` | Optional colors to be associated to each corner | yes | android/ios | yes |
-| blendMode | `BlendMode` | If `colors` is provided, colors are blended with the paint using the blend mode. Default is `dstOver` if colors are provided, `srcOver` if not | yes | android/ios | yes |
+| patch | `CubicBezier[4]` | Specifies four cubic Bezier starting at the top-left corner, in clockwise order, sharing every fourth point. The last cubic Bezier ends at the first point. | yes | android/ios | yes |
+| textures | `Point[]`. | [Texture mapping](https://en.wikipedia.org/wiki/Texture_mapping). The texture is the shader provided by the paint | yes | android/ios | yes |
+| colors | `string[]` | Optional colors to be associated to each corner | no | android/ios | yes |
+| blendMode | `BlendMode` | If `colors` is provided, colors are blended with the paint using the blend mode. Default is `dstOver` if colors are provided, `srcOver` if not | no | android/ios | yes |
+
+### Picture
+
+#### Properties
+
+> [!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 | Type | Description | Required | android/ios | HarmonyOS Support |
+| ------- | --------- | ----------------- | -------- | ----------- | ----------------- |
+| picture | SkPicture | Picture to render | yes | android/ios | yes |
-### Gradients 公共属性
+### Box
+
+#### Properties
+
+> [!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 | Type | Description | Required | android/ios | HarmonyOS Support |
+| ---- | ----------------- | ------------------------- | -------- | ----------- | ----------------- |
+| box | SkRRect \| SkRect | The destination rectangle | yes | android/ios | yes |
+
+### BoxShadow
+
+#### Properties
+
+> [!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 | Type | Description | Required | android/ios | HarmonyOS Support |
+| ------ | ------- | ----------------------------------------------- | -------- | ----------- | ----------------- |
+| dx | number | The X offset of the shadow. | no | android/ios | yes |
+| dy | number | The Y offset of the shadow. | no | android/ios | yes |
+| spread | number | Optional colors to be associated to each corner | no | android/ios | yes |
+| blur | number | The blur radius for the shadow | yes | android/ios | yes |
+| color | Color | The color of the drop shadow | no | android/ios | yes |
+| inner | boolean | Shadows are drawn within the input content | no | android/ios | yes |
+
+### Shader
+
+#### Properties
+
+> [!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 | Type | Description | Required | android/ios | HarmonyOS Support |
+| -------- | ------------------------------------------------------------ | ----------------------------- | -------- | ----------- | ----------------- |
+| source | RuntimeEffect | Compiled shaders | yes | android/ios | yes |
+| uniforms | { [name: string]: number \| Vector \| Vector[] \| number[] \| number[][] } | uniform values | yes | android/ios | yes |
+| children | Shader | Shaders to be used as uniform | yes | android/ios | yes |
+
+### ImageShader
+
+#### Properties
+
+> [!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 | Type | Required | android/ios | HarmonyOS Support |
+| --------- | ------------------------------------------------------------ | ----------------- | -------- | ----------- | ----------------- |
+| image | Image instance. | SkImage | yes | android/ios | yes |
+| tx | Can be `clamp`, `repeat`, `mirror`, or `decal`. | TileMode shaders | no | android/ios | yes |
+| ty | Can be `clamp`, `repeat`, `mirror`, or `decal`. | TileMode values | no | android/ios | yes |
+| fm | Can be `linear` or `nearest`. | FilterMode values | no | android/ios | yes |
+| mm | Can be `none` or `last`. | MipmapMode | no | android/ios | yes |
+| fit | Calculate the transformation matrix to fit the rectangle defined by `fitRect`. | Fit | no | android/ios | yes |
+| rect | The destination rectangle to calculate the transformation matrix via the `fit` property. | SkRect | no | android/ios | yes |
+| transform | The origin property is a helper to set the origin of the transformation. This property is not inherited by its children. | Transforms2d | no | android/ios | yes |
+
+### Gradients Public properties
#### Properties
@@ -452,8 +598,8 @@ Check the release version information in the release address of the third-party
| ---------- | ------------------------------------------------------------------------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- |
| freqX | base frequency in the X direction; range [0.0, 1.0] | number | yes | android/ios | yes |
| freqY | base frequency in the Y direction; range [0.0, 1.0] | number | yes | android/ios | yes |
-| octaves | | number | yes | android/ios | yes |
-| seed | | number | yes | android/ios | yes |
+| octaves | octaves | number | no | android/ios | yes |
+| seed | seed | number | no | android/ios | yes |
| tileWidth | if this and `tileHeight` are non-zero, the frequencies will be modified so that the noise will be tileable for the given size. | number | no | android/ios | yes |
| tileHeight | if this and `tileWidth` are non-zero, the frequencies will be modified so that the noise will be tileable for the given size. | number | no | android/ios | yes |
@@ -469,8 +615,8 @@ Check the release version information in the release address of the third-party
| ---------- | ------------------------------------------------------------------------------------------------------------------------------ | ------ | -------- | ----------- | ----------------- |
| freqX | base frequency in the X direction; range [0.0, 1.0] | number | yes | android/ios | yes |
| freqY | base frequency in the Y direction; range [0.0, 1.0] | number | yes | android/ios | yes |
-| octaves | | number | yes | android/ios | yes |
-| seed | | number | yes | android/ios | yes |
+| octaves | octaves | number | no | android/ios | yes |
+| seed | seed | number | no | android/ios | yes |
| tileWidth | if this and `tileHeight` are non-zero, the frequencies will be modified so that the noise will be tileable for the given size. | number | no | android/ios | yes |
| tileHeight | if this and `tileWidth` are non-zero, the frequencies will be modified so that the noise will be tileable for the given size. | number | no | android/ios | yes |
@@ -511,7 +657,7 @@ Check the release version information in the release address of the third-party
| --------- | ------------------------------------------------------------- | ---------- | -------- | ----------- | ----------------- |
| length | length of the subsegments. | number | yes | android/ios | yes |
| deviation | limit of the movement of the endpoints. | number | yes | android/ios | yes |
-| seed | modifies the randomness. See SkDiscretePathEffect.h for more. | number | yes | android/ios | yes |
+| seed | modifies the randomness. See SkDiscretePathEffect.h for more. | number | no | android/ios | yes |
| children | Optional path effect to apply. | PathEffect | no | android/ios | yes |
### DashPathEffect
@@ -525,7 +671,7 @@ Check the release version information in the release address of the third-party
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- | ----------- | ----------------- |
| intervals | even number of entries with even indices specifying the length of the "on" intervals, and the odd index specifying the length of "off". | number[] | yes | android/ios | yes |
-| phase | offset into the intervals array. Defaults to 0. | number | yes | android/ios | yes |
+| phase | offset into the intervals array. Defaults to 0. | number | no | android/ios | yes |
| children | Optional path effect to apply. | PathEffect | no | android/ios | yes |
### CornerPathEffect
@@ -585,6 +731,172 @@ Check the release version information in the release address of the third-party
| matrix | Matrix to be applied | IMatrix | yes | android/ios | yes |
| children | Optional path effect to apply | PathEffect | no | android/ios | yes |
+### Shadow
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ---------- | ------------------------------------------------------ | ----------- | -------- | ----------- | ----------------- |
+| dx | The X offset of the shadow. | number | yes | android/ios | yes |
+| dy | The Y offset of the shadow. | number | no | android/ios | yes |
+| blur | The blur radius for the shadow | number | no | android/ios | yes |
+| color | The color of the drop shadow | Color | no | android/ios | yes |
+| inner | Shadows are drawn within the input content | boolean | no | android/ios | yes |
+| shadowOnly | If true, the result does not include the input content | boolean | no | android/ios | yes |
+| children | Optional image filter to be applied first | ImageFilter | no | android/ios | yes |
+
+### Blur
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- |
+| blur | The Gaussian sigma blur value | number`or`Vector | yes | android/ios | yes |
+| mode | `mirror`, `repeat`, `clamp`, or `decal` (default is `decal`). | TileMode | no | android/ios | yes |
+| children | Optional image filter to be applied first. | ImageFilter | no | android/ios | yes |
+
+### DisplacementMap
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------------------------ | ------------ | -------- | ----------- | ----------------- |
+| channelX | Color channel to be used along the X axis. Possible values are `r`, `g`, `b`, or `a` | ColorChannel | yes | android/ios | yes |
+| channelY | Color channel to be used along the Y axis. Possible values are `r`, `g`, `b`, or `a` | ColorChannel | no | android/ios | yes |
+| scale | Displacement scale factor to be used | number | no | android/ios | yes |
+| children | Optional image filter to be applied first | ImageFilter | no | android/ios | yes |
+
+### Offset
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------ | ----------- | -------- | ----------- | ----------------- |
+| x | Offset along the X axis. | number | yes | android/ios | yes |
+| y | Offset along the Y axis. | number | yes | android/ios | yes |
+| children | Optional image filter to be applied first. | ImageFilter | no | android/ios | yes |
+
+### Morphology
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- |
+| operator | whether to erode (i.e., thin) or dilate (fatten). Default is dilate | erode`or`dilate | yes | android/ios | yes |
+| radius | Radius of the effect. | number`or`Vector | yes | android/ios | yes |
+| children | Optional image filter to be applied first. | ImageFilter | no | android/ios | yes |
+
+### RuntimeShader
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------ | --------------- | -------- | ----------- | ----------------- |
+| source | Shader to use as an image filter | SkRuntimeEffect | yes | android/ios | yes |
+| children | Optional image filter to be applied first. | ImageFilter | no | android/ios | yes |
+
+### BlurMask
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ---------- | ------------------------------------------------------------ | --------- | -------- | ----------- | ----------------- |
+| blur | Standard deviation of the Gaussian blur. Must be > 0. | number | yes | android/ios | yes |
+| style | Can be `normal`, `solid`, `outer`, or `inner` (default is `normal`). | BlurStyle | no | android/ios | yes |
+| respectCTM | if true the blur's sigma is modified by the CTM (default is `false`). | bool | no | android/ios | yes |
+
+### ColorMatrix
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------ | ----------- | -------- | ----------- | ----------------- |
+| matrix | Color Matrix (5x4) | number[] | yes | android/ios | yes |
+| children | Optional color filter to be applied first. | ColorFilter | no | android/ios | yes |
+
+### BlendColor
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------------------------ | ----------- | -------- | ----------- | ----------------- |
+| color | Color | Color | yes | android/ios | yes |
+| mode | Sets the blend mode that is, the mode used to combine source color with destination color | BlendMode | yes | android/ios | yes |
+| children | Optional color filter to be applied first. | ColorFilter | no | android/ios | yes |
+
+### Lerp
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------ | ----------- | -------- | ----------- | ----------------- |
+| t | Value between 0 and 1. | number | yes | android/ios | yes |
+| children | Optional color filter to be applied first. | ColorFilter | yes | android/ios | yes |
+
+### LinearToSRGBGamma
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------ | ----------- | -------- | ----------- | ----------------- |
+| children | Optional color filter to be applied first. | ColorFilter | no | android/ios | yes |
+
+### SRGBToLinearGamma
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| -------- | ------------------------------------------ | ----------- | -------- | ----------- | ----------------- |
+| children | Optional color filter to be applied first. | ColorFilter | no | android/ios | yes |
+
### Mask
#### Properties
@@ -596,7 +908,7 @@ Check the release version information in the release address of the third-party
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| -------- | ---------------------------------------------------- | ------------------ | -------- | ----------- | ----------------- |
| mode | Is it a luminance or alpha mask (default is `alpha`) | alpha \| luminance | no | android/ios | yes |
-| clip | clip the mask so it doesn't exceed the content | bool | no | android/ios | yes |
+| clip | clip the mask so it doesn't exceed the content | boolean | no | android/ios | yes |
| mask | ReactNode | ReactNode[] | yes | android/ios | yes |
| children | ReactNode | ReactNode[] | yes | android/ios | yes |
@@ -617,7 +929,7 @@ Check the release version information in the release address of the third-party
| height | The height of the destination image. | number | yes | android/ios | yes |
| fit | The method used to fit the image into the rectangle. Values can be `contain`, `fill`, `cover`, `fitHeight`, `fitWidth`, `scaleDown`, or `none` (the default is `contain`). | Fit | no | android/ios | yes |
-### SVG Image
+### ImageSVG
#### Properties
@@ -675,10 +987,10 @@ Check the release version information in the release address of the third-party
| ------ | ---------------------------------------------------------- | ------- | -------- | ----------- | ----------------- |
| glyphs | Glyphs to draw | Glyph[] | yes | android/ios | yes |
| x | x coordinate of the origin of the entire run. Default is 0 | number | no | android/ios | yes |
-| y | y coordinate of the origin of the entire run. Default is 0 | number | yno | android/ios | yes |
+| y | y coordinate of the origin of the entire run. Default is 0 | number | no | android/ios | yes |
| font | Font to use | SkFont | yes | android/ios | yes |
-### Text Path
+### TextPath
#### Properties
@@ -690,9 +1002,9 @@ Check the release version information in the release address of the third-party
| ---- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------- | ----------- | ----------------- |
| path | Path to draw. Can be a string using the [SVG Path notation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#line_commands) or an object created with `Skia.Path.Make()` | Path \| string | yes | android/ios | yes |
| text | Text to draw | string | yes | android/ios | yes |
-| font | Font to use | | | | |
+| font | Font to use | SkFont | yes | android/ios | yes |
-### Text Path
+### TextBlob
#### Properties
@@ -706,6 +1018,30 @@ Check the release version information in the release address of the third-party
| x | x coordinate of the origin of the entire run. Default is 0 | number | no | android/ios | yes |
| y | y coordinate of the origin of the entire run. Default is 0 | number | no | android/ios | yes |
+### BackdropFilter
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ------ | ------------------------------------------------------------ | ------------------------ | -------- | ----------- | ----------------- |
+| filter | Applies an image filter to the area behind the canvas or behind a defined clipping mask | ReactNode \| ReactNode[] | yes | android/ios | yes |
+
+### BackdropBlur
+
+#### Properties
+
+> [!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 | Type | Required | Platform | HarmonyOS Support |
+| ---- | ----------- | ------ | -------- | ----------- | ----------------- |
+| blur | Blur radius | number | yes | android/ios | yes |
+
## RNSkiaModule API
> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
@@ -718,12 +1054,12 @@ Check the release version information in the release address of the third-party
## Known Issues
-- [x] Text 组件无法使用 问题: [issue#Text 暂不支持](https://github.com/react-native-oh-library/react-native-skia/issues/5)
-- [ ] Video 组件无法使用 问题: [issue#Video 暂不支持](https://github.com/react-native-oh-library/react-native-skia/issues/6)
-- [x] Image 组件无法使用 问题: [issue#Image 暂不支持](https://github.com/react-native-oh-library/react-native-skia/issues/7)
+- [x] Text component can't be used Issue: [issue#Text is currently not supported](https://github.com/react-native-oh-library/react-native-skia/issues/5)
+- [ ] Video component can't be used Issue: [issue#Video is currently not supported](https://github.com/react-native-oh-library/react-native-skia/issues/6)
+- [x] Image component can't be used Issue: [issue#Image is currently not supported](https://github.com/react-native-oh-library/react-native-skia/issues/7)
## Others
## License
-This project is licensed under [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-skia/blob/sig/LICENSE.md).
+This project is licensed under [The MIT License (MIT)](https://github.com/Shopify/react-native-skia/blob/main/LICENSE.md).
diff --git a/en/react-native-spring-scrollview.md b/en/react-native-spring-scrollview.md
index d380a0e4e4bcee993454b9a1101130f6bb192e05..04084a651ee23fff1dfedb55396dc6cfe3704ae4 100644
--- a/en/react-native-spring-scrollview.md
+++ b/en/react-native-spring-scrollview.md
@@ -328,38 +328,38 @@ Check the release version information in the release address of the third-party
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| contentStyle | set content style | ViewStyle | yes | iOS/Android | yes |
-| bounces | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction. | boolean | yes | iOS/Android | yes |
-| scrollEnabled | scrollEnabled | boolean | yes | iOS/Android | yes |
-| directionalLockEnabled | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging. | boolean | yes | iOS/Android | yes |
-| initialContentOffset | initial content offset. Only works when initiation. | Offset | yes | iOS/Android | yes |
-| showsVerticalScrollIndicator | showsVerticalScrollIndicator | boolean | yes | iOS/Android | no |
-| showsHorizontalScrollIndicator | showsHorizontalScrollIndicator | boolean | yes | iOS/Android | no |
-| refreshHeader | refresh header | React.ComponentClass | yes | iOS/Android | yes |
-| loadingFooter | loading header | React.ComponentClass | yes | iOS/Android | yes |
-| onRefresh | he callback when refreshing. When this props is configured, a refresh header will be add on the top of the SpringScrollView | ()=>any | yes | iOS/Android | yes |
-| onLoading() | The callback of loading. If set this prop, a loading footer will add to the botom of the SpringScrollView | ()=>any | yes | iOS/Android | yes |
-| allLoaded | Whether the data is all loaded. | boolean | yes | iOS/Android | yes |
-| textInputRefs | text input | any[] | yes | iOS/Android | yes |
-| inverted | inverted. It is a service for LargeList. | boolean | yes | iOS/Android | yes |
-| inputToolBarHeight | set height of the input toolbar | number | yes | iOS/Android | yes |
-| dragToHideKeyboard | hide the currently displayed keyboard | boolean | yes | iOS/Android | yes |
-| onTouchBegin() | begin touch | ()=>any | yes | iOS/Android | yes|
-| onTouchEnd() | touch finished | ()=>any | yes | iOS/Android | yes|
-| beginRefresh() | If you want to begin refreshing programally without finger draging, call this method after initialized. | Promise | yes | iOS/Android | yes|
-| endRefresh() | End the refreshing status. | void | yes | iOS/Android | yes|
-| endLoading() | End the loading status. | void | yes | iOS/Android | yes|
-| scrollTo() | animate scroll to a specific position | Promise | yes | iOS/Android | yes|
-| scroll() | scroll animation to a specific position | Promise | yes | iOS/Android | yes|
-| scrollToBegin() | scroll begin | Promise | yes | iOS/Android | yes|
-| scrollToEnd() | scroll end | Promise | yes | iOS/Android | yes|
-| onScroll() | scroll | (evt: ScrollEvent) => any | yes | iOS/Android | yes|
-| onNativeContentOffsetExtract | calculate content offset | NativeContentOffset | yes | iOS/Android | yes|
-| onScrollBeginDrag() | an event that is triggered when the user starts dragging (scrolling) content. | ()=>any | yes | iOS/Android | yes|
-| onMomentumScrollBegin() | When the user scrolls content and the momentum scroll animation begins, it triggers an event. | ()=>any | yes | iOS/Android | yes|
-| onMomentumScrollEnd() | When the user scrolls content and the momentum scroll animation ends, it triggers an event. | ()=>any | yes | iOS/Android | yes|
-| onSizeChange | The callback when the wrapper view size changed. | (size: Size) => any | yes | iOS/Android | yes |
-| onContentSizeChange | The callback when the content view size changed. | (size: Size) => any | yes | iOS/Android | yes |
+| contentStyle | set content style | ViewStyle | no | iOS/Android | yes |
+| bounces | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction. | boolean | no | iOS/Android | yes |
+| scrollEnabled | scrollEnabled | boolean | no | iOS/Android | yes |
+| directionalLockEnabled | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging. | boolean | no | iOS/Android | yes |
+| initialContentOffset | initial content offset. Only works when initiation. | Offset | no | iOS/Android | yes |
+| showsVerticalScrollIndicator | showsVerticalScrollIndicator | boolean | no | iOS/Android | no |
+| showsHorizontalScrollIndicator | showsHorizontalScrollIndicator | boolean | no | iOS/Android | no |
+| refreshHeader | refresh header | React.ComponentClass | no | iOS/Android | yes |
+| loadingFooter | loading header | React.ComponentClass | no | iOS/Android | yes |
+| onRefresh | he callback when refreshing. When this props is configured, a refresh header will be add on the top of the SpringScrollView | ()=>any | no | iOS/Android | yes |
+| onLoading() | The callback of loading. If set this prop, a loading footer will add to the botom of the SpringScrollView | ()=>any | no | iOS/Android | yes |
+| allLoaded | Whether the data is all loaded. | boolean | no | iOS/Android | yes |
+| textInputRefs | text input | any[] | no | iOS/Android | yes |
+| inverted | inverted. It is a service for LargeList. | boolean | no | iOS/Android | yes |
+| inputToolBarHeight | set height of the input toolbar | number | no | iOS/Android | yes |
+| dragToHideKeyboard | hide the currently displayed keyboard | boolean | no | iOS/Android | yes |
+| onTouchBegin() | begin touch | ()=>any | no | iOS/Android | yes |
+| onTouchEnd() | touch finished | ()=>any | no | iOS/Android | yes |
+| beginRefresh() | If you want to begin refreshing programally without finger draging, call this method after initialized. | Promise | no | iOS/Android | yes |
+| endRefresh() | End the refreshing status. | void | no | iOS/Android | yes |
+| endLoading() | End the loading status. | void | no | iOS/Android | yes |
+| scrollTo() | animate scroll to a specific position | Promise | no | iOS/Android | yes |
+| scroll() | scroll animation to a specific position | Promise | no | iOS/Android | yes |
+| scrollToBegin() | scroll begin | Promise | no | iOS/Android | yes |
+| scrollToEnd() | scroll end | Promise | no | iOS/Android | yes |
+| onScroll() | scroll | (evt: ScrollEvent) => any | no | iOS/Android | yes |
+| onNativeContentOffsetExtract | calculate content offset | NativeContentOffset | no | iOS/Android | yes |
+| onScrollBeginDrag() | an event that is triggered when the user starts dragging (scrolling) content. | ()=>any | no | iOS/Android | yes |
+| onMomentumScrollBegin() | When the user scrolls content and the momentum scroll animation begins, it triggers an event. | ()=>any | no | iOS/Android | yes |
+| onMomentumScrollEnd() | When the user scrolls content and the momentum scroll animation ends, it triggers an event. | ()=>any | no | iOS/Android | yes |
+| onSizeChange | The callback when the wrapper view size changed. | (size: Size) => any | no | iOS/Android | yes |
+| onContentSizeChange | The callback when the content view size changed. | (size: Size) => any | no | iOS/Android | yes |
## Known Issues
diff --git a/zh-cn/react-native-blob-util.md b/zh-cn/react-native-blob-util.md
index 7148d37f1b4b03b2ed17ac5231d6569af9052b74..e04439e731d8b203739344bb9f3b162f11dd22f1 100644
--- a/zh-cn/react-native-blob-util.md
+++ b/zh-cn/react-native-blob-util.md
@@ -101,24 +101,25 @@ export default function BlobUtilDemo() {
const writeArrayChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "ascii", false)
- .then((reactNativeBlobUtilWriteStream) => {
- reactNativeBlobUtilWriteStream.encoding = "ascii";
- reactNativeBlobUtilWriteStream.write(["101", "32", "97"]);
+ .then((reactNativeBlobUtilWriteStream:any) => {
+ reactNativeBlobUtilWriteStream.write([101, 32, 97]);
+ reactNativeBlobUtilWriteStream.close();
});
};
const writeChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ==");
+ reactNativeBlobUtilWriteStream.close();
});
};
const closeStream = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
setTimeout(() => {
reactNativeBlobUtilWriteStream.close();
}, 1000);
@@ -204,7 +205,7 @@ export default function BlobUtilDemo() {
BlobUtil
- {result}
+ {result}
@@ -364,8 +365,6 @@ const styles = StyleSheet.create({
fontWeight: "bold",
textAlign: "center",
fontSize: 16,
- ellipsizeMode: "tail",
- numberOfLines: 2,
},
titleArea: {
width: "90%",
diff --git "a/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md" "b/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md"
index e1666f42adc9d807bc8359fd9846447fab0622e0..e4baced0ea451aa92f1c3fc88e68af60690a10e3 100644
--- "a/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md"
+++ "b/zh-cn/react-native-blob-util\357\274\210nocodegen\357\274\211.md"
@@ -102,24 +102,25 @@ export default function BlobUtilDemo() {
const writeArrayChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "ascii", false)
- .then((reactNativeBlobUtilWriteStream) => {
- reactNativeBlobUtilWriteStream.encoding = "ascii";
- reactNativeBlobUtilWriteStream.write(["101", "32", "97"]);
+ .then((reactNativeBlobUtilWriteStream:any) => {
+ reactNativeBlobUtilWriteStream.write([101, 32, 97]);
+ reactNativeBlobUtilWriteStream.close();
});
};
const writeChunk = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ==");
+ reactNativeBlobUtilWriteStream.close();
});
};
const closeStream = () => {
ReactNativeBlobUtil.fs
.writeStream(result + "/text.txt", "utf8", false)
- .then((reactNativeBlobUtilWriteStream) => {
+ .then((reactNativeBlobUtilWriteStream:any) => {
setTimeout(() => {
reactNativeBlobUtilWriteStream.close();
}, 1000);
@@ -205,7 +206,7 @@ export default function BlobUtilDemo() {
BlobUtil
- {result}
+ {result}
@@ -365,8 +366,6 @@ const styles = StyleSheet.create({
fontWeight: "bold",
textAlign: "center",
fontSize: 16,
- ellipsizeMode: "tail",
- numberOfLines: 2,
},
titleArea: {
width: "90%",
diff --git a/zh-cn/react-native-color-matrix-image-filters.md b/zh-cn/react-native-color-matrix-image-filters.md
index 2439dfa036b50e93ed60c86d2673244ae43245a5..0f70606c955300d60f62f3529c517230b5ba04d2 100644
--- a/zh-cn/react-native-color-matrix-image-filters.md
+++ b/zh-cn/react-native-color-matrix-image-filters.md
@@ -46,7 +46,7 @@ import {
Achromatopsia,
Brightness
} from 'react-native-color-matrix-image-filters';
-
+import React from 'react';
import { View, StyleSheet, Image } from 'react-native';
export const ColorMatrixImageFiltersTest = () => {
diff --git a/zh-cn/react-native-community-blur.md b/zh-cn/react-native-community-blur.md
index c1d047ea2992db7e24f1e22ec8542b4a1fcd1267..04ffb79c202c8db2068012f8de0b9c73d6aab26d 100644
--- a/zh-cn/react-native-community-blur.md
+++ b/zh-cn/react-native-community-blur.md
@@ -373,7 +373,7 @@ ohpm install
#### blurType
-> [!TIP] 如果要使用自适应模糊效果需要配置深色模式[配置文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5#section1421172621111)如果不配置深色模式则自适应模糊效果将没有深色模式,只有浅色模式。
+> [!TIP] 如果要使用自适应模糊效果需要配置深色模式[配置文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-dark-light-color-adaptation)如果不配置深色模式则自适应模糊效果将没有深色模式,只有浅色模式。
| Name | Description | Platform | HarmonyOS Support |
| ------------------------ | ------------------------------------------------------------------------------------------------------ |-----------------------| ----------------- |
diff --git a/zh-cn/react-native-device-info.md b/zh-cn/react-native-device-info.md
index c3eda284d27e51e13f738afe7915a634863aa44e..f7cf62bbb3bb8d2a8f869a577e1807bf7bf0f9ce 100644
--- a/zh-cn/react-native-device-info.md
+++ b/zh-cn/react-native-device-info.md
@@ -42,18 +42,112 @@ yarn add @react-native-oh-tpl/react-native-device-info
> [!WARNING] 使用时 import 的库名不变。
```js
-
+import {
+ SafeAreaView,
+ ScrollView,
+ StatusBar,
+ StyleSheet,
+ Text,
+ useColorScheme,
+ View,
+} from 'react-native';
+import React, { useState, useEffect } from 'react';
import DeviceInfo from 'react-native-device-info';
- DeviceInfo.getBundleId();
- DeviceInfo.getVersion();
- DeviceInfo.getReadableVersion();
- DeviceInfo.getBuildNumber();
- DeviceInfo.isTablet();
- DeviceInfo.getApplicationName();
- DeviceInfo.getBrand();
- DeviceInfo.getModel();
- DeviceInfo.getDeviceType();
- DeviceInfo.getDeviceNameSync();
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+
+function App() {
+ const isDarkMode = useColorScheme() === 'dark';
+ const [deviceInfo, setDeviceInfo] = useState({
+ BundleId: '',
+ Version: '',
+ ReadableVersion: '',
+ BuildNumber: '',
+ Tablet: false,
+ ApplicationName: '',
+ Brand: '',
+ Model: '',
+ DeviceType: '',
+ DeviceNameSync: '',
+ });
+
+ useEffect(() => {
+ const fetchDeviceInfo = async () => {
+ const BundleId = await DeviceInfo.getBundleId();
+ const Version = await DeviceInfo.getVersion();
+ const ReadableVersion = await DeviceInfo.getReadableVersion();
+ const BuildNumber = await DeviceInfo.getBuildNumber();
+ const Tablet = await DeviceInfo.isTablet();
+ const ApplicationName = await DeviceInfo.getApplicationName();
+ const Brand = await DeviceInfo.getBrand();
+ const Model = await DeviceInfo.getModel();
+ const DeviceType = await DeviceInfo.getDeviceType();
+ const DeviceNameSync = await DeviceInfo.getDeviceNameSync();
+
+ setDeviceInfo({
+ BundleId,
+ Version,
+ ReadableVersion,
+ BuildNumber,
+ Tablet,
+ ApplicationName,
+ Brand,
+ Model,
+ DeviceType,
+ DeviceNameSync,
+ });
+ };
+
+ fetchDeviceInfo();
+ }, []);
+
+ const backgroundStyle = {
+ backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+ };
+
+ return (
+
+
+
+
+ Device Information
+ BundleId: {deviceInfo.BundleId}
+ Version: {deviceInfo.Version}
+ ReadableVersion: {deviceInfo.ReadableVersion}
+ BuildNumber: {deviceInfo.BuildNumber}
+ Tablet: {deviceInfo.Tablet ? 'Yes' : 'No'}
+ ApplicationName: {deviceInfo.ApplicationName}
+ Brand: {deviceInfo.Brand}
+ Model: {deviceInfo.Model}
+ DeviceType: {deviceInfo.DeviceType}
+ DeviceNameSync: {deviceInfo.DeviceNameSync}
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ sectionTitle: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ marginBottom: 16,
+ },
+ infoText: {
+ fontSize: 16,
+ marginBottom: 8,
+ },
+});
+
+export default App;
```
## 使用 Codegen
@@ -174,91 +268,91 @@ ohpm install
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| getAndroidId |Gets the ANDROID_ID. See API documentation for appropriate use. | Promise| yes | Android | no |
-| getApiLevel | Gets the API level. | Promise| yes | Android | yes |
-| getApplicationName | Gets the application name. | string | yes | IOS/Android/Windows/visionOS | yes |
-| getAvailableLocationProviders | Returns an object of platform-specfic location providers/servcies, with value whether or not they are currently available.boolean | Promise | yes | IOS/Android/visionOS | yes |
-| getBaseOs | The base OS build the product is based on. | Promise | yes | Android/Windows/Web | yes |
-| getBuildId | Gets build number of the operating system. | Promise | yes | IOS/Android/Windows/visionOS | yes |
-| getBatteryLevel | Gets the battery level of the device as a float comprised between 0 and 1. | Promise | yes | IOS/Android /Windows/Web/visionOS | yes |
-| getBootloader | The system bootloader version number. | Promise | yes | Android | yes |
-| getBrand | Gets the device brand. | string | yes | IOS/Android/Windows/visionOS | yes |
-| getBuildNumber | Gets the application build number. | string | yes | IOS/Android/Windows/visionOS | yes |
-| getBundleId | Gets the application bundle identifier. | string | yes | IOS/Android/Windows/visionOS | yes |
-| isCameraPresent | Tells if the device has any camera now. | Promise | yes | Android/Windows/Web | yes |
-| getCarrier | Gets the carrier name (network operator). | Promise | yes | IOS/Android | yes |
-| getCodename | The current development codename, or the string "REL" if this is a release build. | Promise | yes | Android | yes |
-| getDevice | The name of the industrial design. | Promise | yes | Android | yes |
-| getDeviceId |Gets the device ID. | string | yes | IOS/Android/Windows/visionOS | no |
-| getDeviceType | TReturns the device's type as a string | string | yes | IOS/Android/visionOS | yes |
-| getDisplay | A build ID string meant for displaying to the user. | Promise | yes | Android | yes |
-| getDeviceName | Gets the device name. | Promise | yes | IOS/Android/Windows/visionOS | yes |
-| getDeviceNameSync | Gets the device name. | string | yes | IOS/Android/Windows/visionOS | yes |
-| getDeviceToken | Gets the device token (see DeviceCheck). Only available for iOS 11.0+ on real devices. This will reject the promise when getDeviceToken is not supported, be careful with exception handling. | Promise | yes | IOS/visionOS | no |
-| getFirstInstallTime | Gets the time at which the app was first installed, in milliseconds. | Promise | yes | IOS/Android/Windows/visionOS | yes |
-| getFingerprint | A string that uniquely identifies this build. | Promise | yes | Windows | no |
-| getFontScale | Gets the device font scale. The font scale is the ratio of the current system font to the "normal" font size, so if normal text is 10pt and the system font is currently 15pt, the font scale would be 1.5 This can be used to determine if accessability settings has been changed for the device; you may want to re-layout certain views if the font scale is significantly larger ( > 2.0 ) | Promise | yes | IOS/Android/Windows | yes |
-| getFreeDiskStorage | Method that gets available storage size, in bytes, taking into account both root and data file systems calculation. | Promise | yes | IOS/Android/Windows/Web/visionOS | no |
-| getFreeDiskStorageOld | Old implementation of method that gets available storage size, in bytes. | Promise | yes | IOS/Android/Windows/Web/visionOS | no |
-| getHardware | The name of the hardware (from the kernel command line or /proc). | Promise | yes | Android | yes |
-| getHost | Hostname | Promise | yes | Android/Windows | yes|
-| getHostNames | Hostnames | Promise | yes | Windows | no |
-| getIpAddress | Deprecated Gets the device current IP address. (of wifi only) Switch to react-native-netinfo/netinfo or react-native-network-info | Promise | yes | IOS/Android/Windows/visionOS | yes |
-| getIncremental | The internal value used by the underlying source control to represent this build. | Promise | yes | Android | yes |
-| getInstallerPackageName | The internal value used by the underlying source control to represent this build. | Promise | yes | IOS/Android/Windows/visoinOS | yes |
-| getInstallReferrer | Gets the referrer string upon application installation. | Promise | yes | Android/Windows/Web | no |
-| getInstanceId | Gets the application instance ID. | Promise | yes | Android | yes|
-| getLastUpdateTime | Gets the time at which the app was last updated, in milliseconds. | Promise | yes | Android | yes |
-| getMacAddress | Gets the network adapter MAC address. | Promise | yes | IOS/Android/visionOS | no |
-| getManufacturer | Gets the device manufacturer. | Promise | yes | IOS/Android/visoinOS | yes |
-| getManufacturerSync | Gets the device manufacturer. | string | yes | IOS/Android/visoinOS | yes |
-| getMaxMemory | Returns the maximum amount of memory that the VM will attempt to use, in bytes. | Promise | yes | Android/Windows/Web | no |
-| getModel | Gets the device model. | string | yes | IOS/Android | yes |
-| getPowerState | Gets the power state of the device including the battery level, whether it is plugged in, and if the system is currently operating in low power mode. | Promise | yes | IOS/Android/Windows/Web/visionOS | yes |
-| getProduct | The name of the overall product. | Promise | yes | Android | yes |
-| getPreviewSdkInt | The developer preview revision of a prerelease SDK. | Promise | yes | Android | no |
-| getReadableVersion | Gets the application human readable version (same as getVersion() + '.' + getBuildNumber()) | string | yes | IOS/Android/Windows/visionOS | yes |
-| getSerialNumber | Gets the device serial number. Will be 'unknown' in almost all cases unless you have a privileged app and you know what you're doing. | Promise | yes | Android/Windows | no |
-| getSecurityPatch | The user-visible security patch level. | Promise | yes | Android | yes |
-| getSystemAvailableFeatures | Returns a list of available system features on Android. | Promise | yes | Android | no |
-| getSystemName | Gets the device OS name. | string | yes | IOS/Android/Windows/visoinOS | yes |
-| getSystemVersion | Gets the device OS version. | string | yes | IOS/Android/Windows/visoinOS | yes |
-| getTags | Comma-separated tags describing the build. | Promise | yes | Android | no |
-| getType | The type of build. | Promise | yes | Android | yes |
-| getTotalDiskCapacity | Method that gets full disk storage size, in bytes, taking into account both root and data file systems calculation. | Promise | yes | Android | no |
-| getTotalDiskCapacityOld | Old implementation of method that gets full disk storage size, in bytes. | Promise | yes | Android | no |
-| getTotalMemory | Gets the device total memory, in bytes. | Promise | yes | IOS/Android/Web/visionOS | no |
-| getUniqueId | Gets the device unique ID. On Android it is currently identical to in this module. | Promise | yes | IOS/Android/Windows/visionOS | no |
-| getUsedMemory | Gets the app memory usage, in bytes. | Promise | yes | IOS/Android/Windows/Web/visionOs | yes |
-| getUserAgent | Gets the device User Agent. | Promise | yes | IOS/Android/Web/visionOs | no |
-| getUserAgentSync | Gets the device User Agent. | string | yes | Android/Web | no |
-| getVersion | Gets the application version. Take into account that a version string is device/OS formatted and can contain any additional data (such as build number etc.). If you want to be sure about version format, you can use a regular expression to get the desired portion of the returned version string. | string | yes | IOS/Android/Windows/visionOS | yes |
-| getBrightness | Gets the current brightness level of the device's main screen. Currently iOS only. Returns a number between 0.0 and 1.0, inclusive. | Promise | yes | IOS | no |
-| hasGms | Tells if the device supports Google Mobile Services. | Promise | yes | Android | yes |
-| hasHms | Tells if the device supports Huawei Mobile Services. | Promise | yes | Android | yes |
-| hasNotch | Tells if the device has a notch. | boolean | yes | IOS/Android/Windows/visionOS | no |
-| hasDynamicIsland | Tells if the device has a dynamic island. | boolean | yes | IOS/Android/Windows/visionOS | no |
-| hasSystemFeature | Tells if the device has a specific system feature. | Promise | yes | Android | no |
-| isAirplaneMode | Tells if the device is in Airplane Mode. | Promise | yes | Android/ Web | yes |
-| isBatteryCharging | Tells if the battery is currently charging. | Promise | yes | IOS/Android/Windows/Web/visionOS | yes |
-| isEmulator | Tells if the application is running in an emulator. | Promise | yes | IOS/Android/Windows/visionOS | no |
-| isKeyboardConnected | Tells if the device has a keyboard connected. | Promise | yes | Windows | yes |
-| isLandscape | Tells if the device is currently in landscape mode. | Promise | yes | IOS/Android/Windows/visionOs | yes |
-| isLocationEnabled | Allow access to user's location information | Promise | yes | IOS/Android/Web/visionOS | yes |
-| isMouseConnected | Tells if the device has a mouse connected. | Promise | yes | Windows | yes |
-| isHeadphonesConnected | Tells if the device has a Headphones connected. | Promise | yes | IOS/Android/visionOS | yes |
-| isWiredHeadphonesConnected | Tells if the device has a WiredHeadphones connected. | Promise | yes | IOS/Android/visionOS | yes |
-| isBluetoothHeadphonesConnected | Tells if the device has a BluetoothHeadphones connected. | Promise | yes | IOS/Android/visionOS | yes |
-| isPinOrFingerprintSet | Tells if a PIN number or a fingerprint was set for the device. | Promise | yes | IOS/Android/Windows/visoinOs | yes |
-| isTablet | Tells if the device is a tablet. | boolean | yes | IOS/Android/Windows/visoinOs | yes |
-| isLowRamDevice | Tells if the device has low RAM. | boolean | yes | Android | yes |
-| isDisplayZoomed | Tells if the user changed Display Zoom to Zoomed | boolean | yes | IOS | no |
-| isTabletMode | Tells if the device is in tablet mode. | Promise | yes | Windows | no |
-| supported32BitAbis | device support 32 Abis | Promise | yes | Windows | yes |
-| supported64BitAbis | device support 64 Abis | Promise | yes | Windows | yes |
-| supportedAbis | device support Abis | Promise | yes | IOS/Android/Windows/visoinOS | yes|
-| syncUniqueId | This method is intended for iOS,This synchronizes uniqueId with IDFV or sets new a random string,On iOS it uses the DeviceUID uid identifier. On other platforms it just call getUniqueId() in this module. | Promise | yes | IOS/visionOS | no |
-| getSupportedMediaTypeList | This method gets the list of supported media codecs. | Promise | yes | IOS/Android | yes |
+| getAndroidId |Gets the ANDROID_ID. See API documentation for appropriate use. | Promise| No | Android | no |
+| getApiLevel | Gets the API level. | Promise| No | Android | yes |
+| getApplicationName | Gets the application name. | string | No | IOS/Android/Windows/visionOS | yes |
+| getAvailableLocationProviders | Returns an object of platform-specfic location providers/servcies, with value whether or not they are currently available.boolean | Promise | No | IOS/Android/visionOS | yes |
+| getBaseOs | The base OS build the product is based on. | Promise | No | Android/Windows/Web | yes |
+| getBuildId | Gets build number of the operating system. | Promise | No | IOS/Android/Windows/visionOS | yes |
+| getBatteryLevel | Gets the battery level of the device as a float comprised between 0 and 1. | Promise | No | IOS/Android /Windows/Web/visionOS | yes |
+| getBootloader | The system bootloader version number. | Promise | No | Android | yes |
+| getBrand | Gets the device brand. | string | No | IOS/Android/Windows/visionOS | yes |
+| getBuildNumber | Gets the application build number. | string | No | IOS/Android/Windows/visionOS | yes |
+| getBundleId | Gets the application bundle identifier. | string | No | IOS/Android/Windows/visionOS | yes |
+| isCameraPresent | Tells if the device has any camera now. | Promise | No | Android/Windows/Web | yes |
+| getCarrier | Gets the carrier name (network operator). | Promise | No | IOS/Android | yes |
+| getCodename | The current development codename, or the string "REL" if this is a release build. | Promise | No | Android | yes |
+| getDevice | The name of the industrial design. | Promise | No | Android | yes |
+| getDeviceId |Gets the device ID. | string | No | IOS/Android/Windows/visionOS | no |
+| getDeviceType | TReturns the device's type as a string | string | No | IOS/Android/visionOS | yes |
+| getDisplay | A build ID string meant for displaying to the user. | Promise | No | Android | yes |
+| getDeviceName | Gets the device name. | Promise | No | IOS/Android/Windows/visionOS | yes |
+| getDeviceNameSync | Gets the device name. | string | No | IOS/Android/Windows/visionOS | yes |
+| getDeviceToken | Gets the device token (see DeviceCheck). Only available for iOS 11.0+ on real devices. This will reject the promise when getDeviceToken is not supported, be careful with exception handling. | Promise | No | IOS/visionOS | no |
+| getFirstInstallTime | Gets the time at which the app was first installed, in milliseconds. | Promise | No | IOS/Android/Windows/visionOS | yes |
+| getFingerprint | A string that uniquely identifies this build. | Promise | No | Windows | no |
+| getFontScale | Gets the device font scale. The font scale is the ratio of the current system font to the "normal" font size, so if normal text is 10pt and the system font is currently 15pt, the font scale would be 1.5 This can be used to determine if accessability settings has been changed for the device; you may want to re-layout certain views if the font scale is significantly larger ( > 2.0 ) | Promise | No | IOS/Android/Windows | yes |
+| getFreeDiskStorage | Method that gets available storage size, in bytes, taking into account both root and data file systems calculation. | Promise | No | IOS/Android/Windows/Web/visionOS | no |
+| getFreeDiskStorageOld | Old implementation of method that gets available storage size, in bytes. | Promise | No | IOS/Android/Windows/Web/visionOS | no |
+| getHardware | The name of the hardware (from the kernel command line or /proc). | Promise | No | Android | yes |
+| getHost | Hostname | Promise | No | Android/Windows | yes|
+| getHostNames | Hostnames | Promise | No | Windows | no |
+| getIpAddress | Deprecated Gets the device current IP address. (of wifi only) Switch to react-native-netinfo/netinfo or react-native-network-info | Promise | No | IOS/Android/Windows/visionOS | yes |
+| getIncremental | The internal value used by the underlying source control to represent this build. | Promise | No | Android | yes |
+| getInstallerPackageName | The internal value used by the underlying source control to represent this build. | Promise | No | IOS/Android/Windows/visoinOS | yes |
+| getInstallReferrer | Gets the referrer string upon application installation. | Promise | No | Android/Windows/Web | no |
+| getInstanceId | Gets the application instance ID. | Promise | No | Android | yes|
+| getLastUpdateTime | Gets the time at which the app was last updated, in milliseconds. | Promise | No | Android | yes |
+| getMacAddress | Gets the network adapter MAC address. | Promise | No | IOS/Android/visionOS | no |
+| getManufacturer | Gets the device manufacturer. | Promise | No | IOS/Android/visoinOS | yes |
+| getManufacturerSync | Gets the device manufacturer. | string | No | IOS/Android/visoinOS | yes |
+| getMaxMemory | Returns the maximum amount of memory that the VM will attempt to use, in bytes. | Promise | No | Android/Windows/Web | no |
+| getModel | Gets the device model. | string | No | IOS/Android | yes |
+| getPowerState | Gets the power state of the device including the battery level, whether it is plugged in, and if the system is currently operating in low power mode. | Promise | No | IOS/Android/Windows/Web/visionOS | yes |
+| getProduct | The name of the overall product. | Promise | No | Android | yes |
+| getPreviewSdkInt | The developer preview revision of a prerelease SDK. | Promise | No | Android | no |
+| getReadableVersion | Gets the application human readable version (same as getVersion() + '.' + getBuildNumber()) | string | No | IOS/Android/Windows/visionOS | yes |
+| getSerialNumber | Gets the device serial number. Will be 'unknown' in almost all cases unless you have a privileged app and you know what you're doing. | Promise | No | Android/Windows | no |
+| getSecurityPatch | The user-visible security patch level. | Promise | No | Android | yes |
+| getSystemAvailableFeatures | Returns a list of available system features on Android. | Promise | No | Android | no |
+| getSystemName | Gets the device OS name. | string | No | IOS/Android/Windows/visoinOS | yes |
+| getSystemVersion | Gets the device OS version. | string | No | IOS/Android/Windows/visoinOS | yes |
+| getTags | Comma-separated tags describing the build. | Promise | No | Android | no |
+| getType | The type of build. | Promise | No | Android | yes |
+| getTotalDiskCapacity | Method that gets full disk storage size, in bytes, taking into account both root and data file systems calculation. | Promise | No | Android | no |
+| getTotalDiskCapacityOld | Old implementation of method that gets full disk storage size, in bytes. | Promise | No | Android | no |
+| getTotalMemory | Gets the device total memory, in bytes. | Promise | No | IOS/Android/Web/visionOS | no |
+| getUniqueId | Gets the device unique ID. On Android it is currently identical to in this module. | Promise | No | IOS/Android/Windows/visionOS | no |
+| getUsedMemory | Gets the app memory usage, in bytes. | Promise | No | IOS/Android/Windows/Web/visionOs | yes |
+| getUserAgent | Gets the device User Agent. | Promise | No | IOS/Android/Web/visionOs | no |
+| getUserAgentSync | Gets the device User Agent. | string | No | Android/Web | no |
+| getVersion | Gets the application version. Take into account that a version string is device/OS formatted and can contain any additional data (such as build number etc.). If you want to be sure about version format, you can use a regular expression to get the desired portion of the returned version string. | string | No | IOS/Android/Windows/visionOS | yes |
+| getBrightness | Gets the current brightness level of the device's main screen. Currently iOS only. Returns a number between 0.0 and 1.0, inclusive. | Promise | No | IOS | no |
+| hasGms | Tells if the device supports Google Mobile Services. | Promise | No | Android | yes |
+| hasHms | Tells if the device supports Huawei Mobile Services. | Promise | No | Android | yes |
+| hasNotch | Tells if the device has a notch. | boolean | No | IOS/Android/Windows/visionOS | no |
+| hasDynamicIsland | Tells if the device has a dynamic island. | boolean | No | IOS/Android/Windows/visionOS | no |
+| hasSystemFeature | Tells if the device has a specific system feature. | Promise | No | Android | no |
+| isAirplaneMode | Tells if the device is in Airplane Mode. | Promise | No | Android/ Web | yes |
+| isBatteryCharging | Tells if the battery is currently charging. | Promise | No | IOS/Android/Windows/Web/visionOS | yes |
+| isEmulator | Tells if the application is running in an emulator. | Promise | No | IOS/Android/Windows/visionOS | no |
+| isKeyboardConnected | Tells if the device has a keyboard connected. | Promise | No | Windows | yes |
+| isLandscape | Tells if the device is currently in landscape mode. | Promise | No | IOS/Android/Windows/visionOs | yes |
+| isLocationEnabled | Allow access to user's location information | Promise | No | IOS/Android/Web/visionOS | yes |
+| isMouseConnected | Tells if the device has a mouse connected. | Promise | No | Windows | yes |
+| isHeadphonesConnected | Tells if the device has a Headphones connected. | Promise | No | IOS/Android/visionOS | yes |
+| isWiredHeadphonesConnected | Tells if the device has a WiredHeadphones connected. | Promise | No | IOS/Android/visionOS | yes |
+| isBluetoothHeadphonesConnected | Tells if the device has a BluetoothHeadphones connected. | Promise | No | IOS/Android/visionOS | yes |
+| isPinOrFingerprintSet | Tells if a PIN number or a fingerprint was set for the device. | Promise | No | IOS/Android/Windows/visoinOs | yes |
+| isTablet | Tells if the device is a tablet. | boolean | No | IOS/Android/Windows/visoinOs | yes |
+| isLowRamDevice | Tells if the device has low RAM. | boolean | No | Android | yes |
+| isDisplayZoomed | Tells if the user changed Display Zoom to Zoomed | boolean | No | IOS | no |
+| isTabletMode | Tells if the device is in tablet mode. | Promise | No | Windows | no |
+| supported32BitAbis | device support 32 Abis | Promise | No | Windows | yes |
+| supported64BitAbis | device support 64 Abis | Promise | No | Windows | yes |
+| supportedAbis | device support Abis | Promise | No | IOS/Android/Windows/visoinOS | yes|
+| syncUniqueId | This method is intended for iOS,This synchronizes uniqueId with IDFV or sets new a random string,On iOS it uses the DeviceUID uid identifier. On other platforms it just call getUniqueId() in this module. | Promise | No | IOS/visionOS | no |
+| getSupportedMediaTypeList | This method gets the list of supported media codecs. | Promise | No | IOS/Android | yes |
## 遗留问题
diff --git a/zh-cn/react-native-image-crop-picker.md b/zh-cn/react-native-image-crop-picker.md
index 92efa7f31dd7507034d02af2aeed053c889892d9..ed41411c42cd0df3cf194fba4acca205be502dde 100644
--- a/zh-cn/react-native-image-crop-picker.md
+++ b/zh-cn/react-native-image-crop-picker.md
@@ -43,744 +43,744 @@ import React from 'react';
import { Text, StyleSheet, TextInput, View, Button, ScrollView, Switch } from 'react-native';
const ImageCropPickDemo = () => {
- const TAG: string = 'ImageCropPickerTurboModule';
- const [maxFiles, setMaxFiles] = React.useState('');
- const [imageQuality, setImageQuality] = React.useState('');
- const [imagePath, setImagePath] = React.useState('');
- const [clearImagePath, setClearImagePath] = React.useState('');
- const [cropperTitle, setCropperTitle] = React.useState('');
- const [chooseText, setChooseText] = React.useState('');
- const [chooseColor, setChooseColor] = React.useState('');
- const [cancelText, setCancelText] = React.useState('');
- const [cancelColor, setCancelColor] = React.useState('');
- const [cropperRotate, setCropperRotate] = React.useState(false);
- const [showCropGuidelines, setShowCropGuidelines] = React.useState(true);
- const [showCropFrame, setShowCropFrame] = React.useState(true);
- const [multiple, setMultiple] = React.useState(false);
- const [includeExif, setIncludeExif] = React.useState(false);
- const [avoidEmptySpace, setAvoidEmptySpace] = React.useState(false);
- const [writeTempFile, setTempFile] = React.useState(true);
- const [includeBase64, setBase64] = React.useState(false);
- const [freeStyleCropEnabled, setFreeStyleCropEnabled] = React.useState(false);
- const [forceJpg, setForceJpg] = React.useState(false);
- const [showsSelectedCount, setShowsSelectedCount] = React.useState(true);
- const [selectedButton, setSelectedButton] = React.useState('any');
- const [useFrontCamera, setUseFrontCamera] = React.useState(false);
- const [croppingCamera, setCroppingCamera] = React.useState(false);
- const [writeTempFileCamera, setTempFileCamera] = React.useState(true);
- const [includeBase64Camera, setBase64Camera] = React.useState(false);
- const [includeExifCamera, setIncludeExifCamera] = React.useState(false);
- const [avoidEmptySpaceCamera, setAvoidEmptySpaceCamera] = React.useState(false);
- const [freeStyleCropEnabledCamera, setFreeStyleCropEnabledCamera] = React.useState(false);
- const [forceJpgCamera, setForceJpgCamera] = React.useState(false);
- const [mediaTypeCamera, setMediaTypeCamera] = React.useState('any');
- const [imageQualityCamera, setImageQualityCamera] = React.useState('');
- const [cropperTitleCamera, setCropperTitleCamera] = React.useState('');
- const [chooseTextCamera, setChooseTextCamera] = React.useState('');
- const [chooseColorCamera, setChooseColorCamera] = React.useState('');
- const [cancelTextCamera, setCancelTextCamera] = React.useState('');
- const [cancelColorCamera, setCancelColorCamera] = React.useState('');
- const [cropperRotateCamera, setCropperRotateCamera] = React.useState(false);
- const [showCropGuidelinesCamera, setShowCropGuidelinesCamera] = React.useState(true);
- const [showCropFrameCamera, setShowCropFrameCamera] = React.useState(true);
- const [writeTempFileCropper, setTempFileCropper] = React.useState(true);
- const [forceJpgCropper, setForceJpgCropper] = React.useState(false);
- const [includeBase64Cropper, setBase64Cropper] = React.useState(false);
- const [includeExifCropper, setIncludeExifCropper] = React.useState(false);
- const [avoidEmptySpaceCropper, setAvoidEmptySpaceCropper] = React.useState(false);
- const [freeStyleCropEnabledCropper, setFreeStyleCropEnabledCropper] = React.useState(false);
- const [imageQualityCropper, setimageQualityCropper] = React.useState('');
-
- const handleButtonPress = (buttonName) => {
- setSelectedButton(buttonName);
- };
-
- const handleMediaType = (buttonName) => {
- setMediaTypeCamera(buttonName);
- };
-
- return (
-
- 相机、图库、裁剪功能:
-
-
-
-
- multiple:
- multiple ? setMultiple(false) : setMultiple(true)}
- />
-
- writeTempFile:
- writeTempFile ? setTempFile(false) : setTempFile(true)}
- />
-
-
-
-
- includeBase64:
- includeBase64 ? setBase64(false) : setBase64(true)}
- />
-
- includeExif:
- includeExif ? setIncludeExif(false) : setIncludeExif(true)}
- />
-
-
-
-
-
- avoidEmptySpaceAroundImage :
- avoidEmptySpace ? setAvoidEmptySpace(false) : setAvoidEmptySpace(true)}
- />
-
-
-
-
-
- freeStyleCropEnabled :
- freeStyleCropEnabled ? setFreeStyleCropEnabled(false) : setFreeStyleCropEnabled(true)}
- />
-
-
-
-
-
- forceJpg:
- forceJpg ? setForceJpg(false) : setForceJpg(true)}
- />
-
- showsSelectedCount:
- showsSelectedCount ? setShowsSelectedCount(false) : setShowsSelectedCount(true)}
- />
-
-
-
-
-
- mediaType:
- handleButtonPress('photo')}
- accessibilityState={{ selected: selectedButton === 'photo' }}
- />
- handleButtonPress('video')}
- accessibilityState={{ selected: selectedButton === 'video' }}
- />
- handleButtonPress('any')}
- accessibilityState={{ selected: selectedButton === 'any' }}
- />
-
-
- mediaType is {selectedButton}
-
-
-
- minFiles:
- 1
-
-
-
- maxFiles:
-
- (number)
-
-
-
- compressImageQuality:
-
- (0.1 到 1)
-
-
-
-
- {
- openPicker({
- multiple: multiple,
- writeTempFile: writeTempFile,
- includeBase64: includeBase64,
- includeExif: includeExif,
- avoidEmptySpaceAroundImage: avoidEmptySpace,
- freeStyleCropEnabled: freeStyleCropEnabled,
- forceJpg: forceJpg,
- showsSelectedCount: showsSelectedCount,
- mediaType: selectedButton,
- minFiles: 1,
- maxFiles: maxFiles,
- compressImageQuality: imageQuality,
- }).then(image => {
- console.log(TAG + ' openPicker result ' + JSON.stringify(image))
- });
- }}
- />
-
-
-
-
- cropping:
- croppingCamera ? setCroppingCamera(false) : setCroppingCamera(true)}
- />
-
- writeTempFile:
- writeTempFileCamera ? setTempFileCamera(false) : setTempFileCamera(true)}
- />
-
-
-
-
-
- includeBase64:
- includeBase64Camera ? setBase64Camera(false) : setBase64Camera(true)}
- />
-
- includeExif:
- includeExifCamera ? setIncludeExifCamera(false) : setIncludeExifCamera(true)}
- />
-
-
-
-
-
- avoidEmptySpaceAroundImage :
- avoidEmptySpaceCamera ? setAvoidEmptySpaceCamera(false) : setAvoidEmptySpaceCamera(true)}
- />
-
-
-
-
-
- freeStyleCropEnabled :
- freeStyleCropEnabledCamera ? setFreeStyleCropEnabledCamera(false) : setFreeStyleCropEnabledCamera(true)}
- />
-
-
-
-
-
- useFrontCamera:
- useFrontCamera ? setUseFrontCamera(false) : setUseFrontCamera(true)}
- />
-
- forceJpg:
- forceJpgCamera ? setForceJpgCamera(false) : setForceJpgCamera(true)}
- />
-
-
-
- mediaType:
- handleMediaType('photo')}
- accessibilityState={{ selected: mediaTypeCamera === 'photo' }}
- />
- handleMediaType('video')}
- accessibilityState={{ selected: mediaTypeCamera === 'video' }}
- />
- handleMediaType('any')}
- accessibilityState={{ selected: mediaTypeCamera === 'any' }}
- />
-
-
- mediaType is {mediaTypeCamera}
-
-
-
- compressImageQuality:
-
- (0.1 到 1)
-
-
-
- cropperToolbarTitle:
-
-
-
-
- setCropperTitleCamera(value)}
- value={cropperTitleCamera}
- />
-
-
-
- cropperChooseText:
-
-
-
-
- setChooseTextCamera(value)}
- value={chooseTextCamera}
- />
-
-
-
- cropperChooseColor:例如 #FF0000
-
-
-
-
- setChooseColorCamera(value)}
- value={chooseColorCamera}
- />
-
-
-
- cropperCancelText:
-
-
-
-
- setCancelTextCamera(value)}
- value={cancelTextCamera}
- />
-
-
-
- cropperCancelColor:例如 #FF0000
-
-
-
-
- setCancelColorCamera(value)}
- value={cancelColorCamera}
- />
-
-
-
-
- cropperRotateButtonsHidden:
- cropperRotateCamera ? setCropperRotateCamera(false) : setCropperRotateCamera(true)}
- />
-
-
-
-
- showCropGuidelines:
- showCropGuidelinesCamera ? setShowCropGuidelinesCamera(false) : setShowCropGuidelinesCamera(true)}
- />
-
-
-
-
- showCropFrame:
- showCropFrameCamera ? setShowCropFrameCamera(false) : setShowCropFrameCamera(true)}
- />
-
-
-
- {
- ImagePicker.openCamera({
- cropping: croppingCamera,
- writeTempFile: writeTempFileCamera,
- includeBase64: includeBase64Camera,
- includeExif: includeExifCamera,
- avoidEmptySpaceAroundImage: avoidEmptySpaceCamera,
- freeStyleCropEnabled: freeStyleCropEnabledCamera,
- useFrontCamera: useFrontCamera,
- forceJpg: forceJpgCamera,
- mediaType: mediaTypeCamera,
- compressImageQuality: imageQualityCamera,
- cropperToolbarTitle: cropperTitleCamera,
- cropperChooseText: chooseTextCamera,
- cropperChooseColor: chooseColorCamera,
- cropperCancelText: cancelTextCamera,
- cropperCancelColor: cancelColorCamera,
- cropperRotateButtonsHidden: cropperRotateCamera,
- showCropGuidelines: showCropGuidelinesCamera,
- showCropFrame: showCropFrameCamera,
- }).then(image => {
- console.log(TAG + ' openCamera result ' + JSON.stringify(image))
- });
- }}
- />
-
-
-
- 请输入需要裁剪的图片地址:
-
-
-
-
- setImagePath(value)}
- value={imagePath}
- />
-
-
-
-
-
- writeTempFile:
- writeTempFileCropper ? setTempFileCropper(false) : setTempFileCropper(true)}
- />
-
- forceJpg:
- forceJpgCropper ? setForceJpgCropper(false) : setForceJpgCropper(true)}
- />
-
-
-
-
- includeBase64:
- includeBase64Cropper ? setBase64Cropper(false) : setBase64Cropper(true)}
- />
-
- includeExif:
- includeExifCropper ? setIncludeExifCropper(false) : setIncludeExifCropper(true)}
- />
-
-
-
-
-
- avoidEmptySpaceAroundImage :
- avoidEmptySpaceCropper ? setAvoidEmptySpaceCropper(false) : setAvoidEmptySpaceCropper(true)}
- />
-
-
-
-
-
- freeStyleCropEnabled :
- freeStyleCropEnabledCropper ? setFreeStyleCropEnabledCropper(false) : setFreeStyleCropEnabledCropper(true)}
- />
-
-
-
-
- compressImageQuality:
-
- (0.1 到 1)
-
-
-
-
- cropperToolbarTitle:
-
-
-
-
- setCropperTitle(value)}
- value={cropperTitle}
- />
-
-
-
- cropperChooseText:
-
-
-
-
- setChooseText(value)}
- value={chooseText}
- />
-
-
-
- cropperChooseColor:例如 #FF0000
-
-
-
-
- setChooseColor(value)}
- value={chooseColor}
- />
-
-
-
- cropperCancelText:
-
-
-
-
- setCancelText(value)}
- value={cancelText}
- />
-
-
-
- cropperCancelColor:例如 #FF0000
-
-
-
-
- setCancelColor(value)}
- value={cancelColor}
- />
-
-
-
-
- cropperRotateButtonsHidden:
- cropperRotate ? setCropperRotate(false) : setCropperRotate(true)}
- />
-
-
-
-
- showCropGuidelines:
- showCropGuidelines ? setShowCropGuidelines(false) : setShowCropGuidelines(true)}
- />
-
-
-
-
- showCropFrame:
- showCropFrame ? setShowCropFrame(false) : setShowCropFrame(true)}
- />
-
-
-
-
-
- {
-
- ImagePicker.openCropper({
- path: imagePath,
- width: 300,
- height: 400,
- writeTempFile: writeTempFileCropper,
- includeBase64: includeBase64Cropper,
- includeExif: includeExifCropper,
- avoidEmptySpaceAroundImage: avoidEmptySpaceCropper,
- freeStyleCropEnabled: freeStyleCropEnabledCropper,
- compressImageQuality: imageQualityCropper,
- forceJpg: forceJpgCropper,
- cropperToolbarTitle: cropperTitle,
- cropperChooseText: chooseText,
- cropperChooseColor: chooseColor,
- cropperCancelText: cancelText,
- cropperCancelColor: cancelColor,
- cropperRotateButtonsHidden: cropperRotate,
- showCropGuidelines: showCropGuidelines,
- showCropFrame: showCropFrame,
- }).then((image => {
- console.log(TAG + ' openCropper result ' + JSON.stringify(image))
- }))
- }}
- />
-
-
-
-
-
- 清除文件:
-
-
-
- {
- ImagePicker.clean({}).then(image => {
- console.log(TAG + ' clean result ' + JSON.stringify(image))
- });
- }}
- />
-
-
-
- 请输入需要清除图片地址:
-
-
-
-
- setClearImagePath(value)}
- value={clearImagePath}
- />
-
-
-
- {
- console.log(TAG + " cleanSingle path " + clearImagePath)
- ImagePicker.cleanSingle('/data/storage/el2/base/haps/entry/temp/rn_image_crop_picker_lib_temp_' + clearImagePath).then(image => {
-
- })
- }}
- />
-
-
-
-
-
-
-
- );
+ const TAG: string = 'ImageCropPickerTurboModule';
+ const [maxFiles, setMaxFiles] = React.useState('');
+ const [imageQuality, setImageQuality] = React.useState('');
+ const [imagePath, setImagePath] = React.useState('');
+ const [clearImagePath, setClearImagePath] = React.useState('');
+ const [cropperTitle, setCropperTitle] = React.useState('');
+ const [chooseText, setChooseText] = React.useState('');
+ const [chooseColor, setChooseColor] = React.useState('');
+ const [cancelText, setCancelText] = React.useState('');
+ const [cancelColor, setCancelColor] = React.useState('');
+ const [cropperRotate, setCropperRotate] = React.useState(false);
+ const [showCropGuidelines, setShowCropGuidelines] = React.useState(true);
+ const [showCropFrame, setShowCropFrame] = React.useState(true);
+ const [multiple, setMultiple] = React.useState(false);
+ const [includeExif, setIncludeExif] = React.useState(false);
+ const [avoidEmptySpace, setAvoidEmptySpace] = React.useState(false);
+ const [writeTempFile, setTempFile] = React.useState(true);
+ const [includeBase64, setBase64] = React.useState(false);
+ const [freeStyleCropEnabled, setFreeStyleCropEnabled] = React.useState(false);
+ const [forceJpg, setForceJpg] = React.useState(false);
+ const [showsSelectedCount, setShowsSelectedCount] = React.useState(true);
+ const [selectedButton, setSelectedButton] = React.useState('any');
+ const [useFrontCamera, setUseFrontCamera] = React.useState(false);
+ const [croppingCamera, setCroppingCamera] = React.useState(false);
+ const [writeTempFileCamera, setTempFileCamera] = React.useState(true);
+ const [includeBase64Camera, setBase64Camera] = React.useState(false);
+ const [includeExifCamera, setIncludeExifCamera] = React.useState(false);
+ const [avoidEmptySpaceCamera, setAvoidEmptySpaceCamera] = React.useState(false);
+ const [freeStyleCropEnabledCamera, setFreeStyleCropEnabledCamera] = React.useState(false);
+ const [forceJpgCamera, setForceJpgCamera] = React.useState(false);
+ const [mediaTypeCamera, setMediaTypeCamera] = React.useState('any');
+ const [imageQualityCamera, setImageQualityCamera] = React.useState('');
+ const [cropperTitleCamera, setCropperTitleCamera] = React.useState('');
+ const [chooseTextCamera, setChooseTextCamera] = React.useState('');
+ const [chooseColorCamera, setChooseColorCamera] = React.useState('');
+ const [cancelTextCamera, setCancelTextCamera] = React.useState('');
+ const [cancelColorCamera, setCancelColorCamera] = React.useState('');
+ const [cropperRotateCamera, setCropperRotateCamera] = React.useState(false);
+ const [showCropGuidelinesCamera, setShowCropGuidelinesCamera] = React.useState(true);
+ const [showCropFrameCamera, setShowCropFrameCamera] = React.useState(true);
+ const [writeTempFileCropper, setTempFileCropper] = React.useState(true);
+ const [forceJpgCropper, setForceJpgCropper] = React.useState(false);
+ const [includeBase64Cropper, setBase64Cropper] = React.useState(false);
+ const [includeExifCropper, setIncludeExifCropper] = React.useState(false);
+ const [avoidEmptySpaceCropper, setAvoidEmptySpaceCropper] = React.useState(false);
+ const [freeStyleCropEnabledCropper, setFreeStyleCropEnabledCropper] = React.useState(false);
+ const [imageQualityCropper, setimageQualityCropper] = React.useState('');
+
+ const handleButtonPress = (buttonName: any) => {
+ setSelectedButton(buttonName);
+ };
+
+ const handleMediaType = (buttonName: any) => {
+ setMediaTypeCamera(buttonName);
+ };
+
+ return (
+
+ Camera, Gallery, Cropping Functionality
+
+
+
+
+ multiple:
+ multiple ? setMultiple(false) : setMultiple(true)}
+ />
+
+ writeTempFile:
+ writeTempFile ? setTempFile(false) : setTempFile(true)}
+ />
+
+
+
+
+ includeBase64:
+ includeBase64 ? setBase64(false) : setBase64(true)}
+ />
+
+ includeExif:
+ includeExif ? setIncludeExif(false) : setIncludeExif(true)}
+ />
+
+
+
+
+
+ avoidEmptySpaceAroundImage :
+ avoidEmptySpace ? setAvoidEmptySpace(false) : setAvoidEmptySpace(true)}
+ />
+
+
+
+
+
+ freeStyleCropEnabled :
+ freeStyleCropEnabled ? setFreeStyleCropEnabled(false) : setFreeStyleCropEnabled(true)}
+ />
+
+
+
+
+
+ forceJpg:
+ forceJpg ? setForceJpg(false) : setForceJpg(true)}
+ />
+
+ showsSelectedCount:
+ showsSelectedCount ? setShowsSelectedCount(false) : setShowsSelectedCount(true)}
+ />
+
+
+
+
+
+ mediaType:
+ handleButtonPress('photo')}
+ accessibilityState={{ selected: selectedButton === 'photo' }}
+ />
+ handleButtonPress('video')}
+ accessibilityState={{ selected: selectedButton === 'video' }}
+ />
+ handleButtonPress('any')}
+ accessibilityState={{ selected: selectedButton === 'any' }}
+ />
+
+
+ mediaType is {selectedButton}
+
+
+
+ minFiles:
+ 1
+
+
+
+ maxFiles:
+
+ (number)
+
+
+
+ compressImageQuality:
+
+ (0.1 到 1)
+
+
+
+
+ {
+ openPicker({
+ multiple: multiple,
+ writeTempFile: writeTempFile,
+ includeBase64: includeBase64,
+ includeExif: includeExif,
+ avoidEmptySpaceAroundImage: avoidEmptySpace,
+ freeStyleCropEnabled: freeStyleCropEnabled,
+ forceJpg: forceJpg,
+ showsSelectedCount: showsSelectedCount,
+ mediaType: selectedButton,
+ minFiles: 1,
+ maxFiles: maxFiles,
+ compressImageQuality: imageQuality,
+ }).then((image: any) => {
+ console.log(TAG + ' openPicker result ' + JSON.stringify(image))
+ });
+ }}
+ />
+
+
+
+
+ cropping:
+ croppingCamera ? setCroppingCamera(false) : setCroppingCamera(true)}
+ />
+
+ writeTempFile:
+ writeTempFileCamera ? setTempFileCamera(false) : setTempFileCamera(true)}
+ />
+
+
+
+
+
+ includeBase64:
+ includeBase64Camera ? setBase64Camera(false) : setBase64Camera(true)}
+ />
+
+ includeExif:
+ includeExifCamera ? setIncludeExifCamera(false) : setIncludeExifCamera(true)}
+ />
+
+
+
+
+
+ avoidEmptySpaceAroundImage :
+ avoidEmptySpaceCamera ? setAvoidEmptySpaceCamera(false) : setAvoidEmptySpaceCamera(true)}
+ />
+
+
+
+
+
+ freeStyleCropEnabled :
+ freeStyleCropEnabledCamera ? setFreeStyleCropEnabledCamera(false) : setFreeStyleCropEnabledCamera(true)}
+ />
+
+
+
+
+
+ useFrontCamera:
+ useFrontCamera ? setUseFrontCamera(false) : setUseFrontCamera(true)}
+ />
+
+ forceJpg:
+ forceJpgCamera ? setForceJpgCamera(false) : setForceJpgCamera(true)}
+ />
+
+
+
+ mediaType:
+ handleMediaType('photo')}
+ accessibilityState={{ selected: mediaTypeCamera === 'photo' }}
+ />
+ handleMediaType('video')}
+ accessibilityState={{ selected: mediaTypeCamera === 'video' }}
+ />
+ handleMediaType('any')}
+ accessibilityState={{ selected: mediaTypeCamera === 'any' }}
+ />
+
+
+ mediaType is {mediaTypeCamera}
+
+
+
+ compressImageQuality:
+
+ (0.1 to 1)
+
+
+
+ cropperToolbarTitle:
+
+
+
+
+ setCropperTitleCamera(value)}
+ value={cropperTitleCamera}
+ />
+
+
+
+ cropperChooseText:
+
+
+
+
+ setChooseTextCamera(value)}
+ value={chooseTextCamera}
+ />
+
+
+
+ cropperChooseColor:#FF0000
+
+
+
+
+ setChooseColorCamera(value)}
+ value={chooseColorCamera}
+ />
+
+
+
+ cropperCancelText:
+
+
+
+
+ setCancelTextCamera(value)}
+ value={cancelTextCamera}
+ />
+
+
+
+ cropperCancelColor: #FF0000
+
+
+
+
+ setCancelColorCamera(value)}
+ value={cancelColorCamera}
+ />
+
+
+
+
+ cropperRotateButtonsHidden:
+ cropperRotateCamera ? setCropperRotateCamera(false) : setCropperRotateCamera(true)}
+ />
+
+
+
+
+ showCropGuidelines:
+ showCropGuidelinesCamera ? setShowCropGuidelinesCamera(false) : setShowCropGuidelinesCamera(true)}
+ />
+
+
+
+
+ showCropFrame:
+ showCropFrameCamera ? setShowCropFrameCamera(false) : setShowCropFrameCamera(true)}
+ />
+
+
+
+ {
+ ImagePicker.openCamera({
+ cropping: croppingCamera,
+ writeTempFile: writeTempFileCamera,
+ includeBase64: includeBase64Camera,
+ includeExif: includeExifCamera,
+ avoidEmptySpaceAroundImage: avoidEmptySpaceCamera,
+ freeStyleCropEnabled: freeStyleCropEnabledCamera,
+ useFrontCamera: useFrontCamera,
+ forceJpg: forceJpgCamera,
+ mediaType: mediaTypeCamera,
+ compressImageQuality: imageQualityCamera,
+ cropperToolbarTitle: cropperTitleCamera,
+ cropperChooseText: chooseTextCamera,
+ cropperChooseColor: chooseColorCamera,
+ cropperCancelText: cancelTextCamera,
+ cropperCancelColor: cancelColorCamera,
+ cropperRotateButtonsHidden: cropperRotateCamera,
+ showCropGuidelines: showCropGuidelinesCamera,
+ showCropFrame: showCropFrameCamera,
+ }).then((image: any) => {
+ console.log(TAG + ' openCamera result ' + JSON.stringify(image))
+ });
+ }}
+ />
+
+
+
+ Please enter the address of the image that needs to be cropped:
+
+
+
+
+ setImagePath(value)}
+ value={imagePath}
+ />
+
+
+
+
+
+ writeTempFile:
+ writeTempFileCropper ? setTempFileCropper(false) : setTempFileCropper(true)}
+ />
+
+ forceJpg:
+ forceJpgCropper ? setForceJpgCropper(false) : setForceJpgCropper(true)}
+ />
+
+
+
+
+ includeBase64:
+ includeBase64Cropper ? setBase64Cropper(false) : setBase64Cropper(true)}
+ />
+
+ includeExif:
+ includeExifCropper ? setIncludeExifCropper(false) : setIncludeExifCropper(true)}
+ />
+
+
+
+
+
+ avoidEmptySpaceAroundImage :
+ avoidEmptySpaceCropper ? setAvoidEmptySpaceCropper(false) : setAvoidEmptySpaceCropper(true)}
+ />
+
+
+
+
+
+ freeStyleCropEnabled :
+ freeStyleCropEnabledCropper ? setFreeStyleCropEnabledCropper(false) : setFreeStyleCropEnabledCropper(true)}
+ />
+
+
+
+
+ compressImageQuality:
+
+ (0.1 to 1)
+
+
+
+
+ cropperToolbarTitle:
+
+
+
+
+ setCropperTitle(value)}
+ value={cropperTitle}
+ />
+
+
+
+ cropperChooseText:
+
+
+
+
+ setChooseText(value)}
+ value={chooseText}
+ />
+
+
+
+ cropperChooseColor:#FF0000
+
+
+
+
+ setChooseColor(value)}
+ value={chooseColor}
+ />
+
+
+
+ cropperCancelText:
+
+
+
+
+ setCancelText(value)}
+ value={cancelText}
+ />
+
+
+
+ cropperCancelColor:#FF0000
+
+
+
+
+ setCancelColor(value)}
+ value={cancelColor}
+ />
+
+
+
+
+ cropperRotateButtonsHidden:
+ cropperRotate ? setCropperRotate(false) : setCropperRotate(true)}
+ />
+
+
+
+
+ showCropGuidelines:
+ showCropGuidelines ? setShowCropGuidelines(false) : setShowCropGuidelines(true)}
+ />
+
+
+
+
+ showCropFrame:
+ showCropFrame ? setShowCropFrame(false) : setShowCropFrame(true)}
+ />
+
+
+
+
+
+ {
+
+ ImagePicker.openCropper({
+ path: imagePath,
+ width: 300,
+ height: 400,
+ writeTempFile: writeTempFileCropper,
+ includeBase64: includeBase64Cropper,
+ includeExif: includeExifCropper,
+ avoidEmptySpaceAroundImage: avoidEmptySpaceCropper,
+ freeStyleCropEnabled: freeStyleCropEnabledCropper,
+ compressImageQuality: imageQualityCropper,
+ forceJpg: forceJpgCropper,
+ cropperToolbarTitle: cropperTitle,
+ cropperChooseText: chooseText,
+ cropperChooseColor: chooseColor,
+ cropperCancelText: cancelText,
+ cropperCancelColor: cancelColor,
+ cropperRotateButtonsHidden: cropperRotate,
+ showCropGuidelines: showCropGuidelines,
+ showCropFrame: showCropFrame,
+ }).then(((image: any) => {
+ console.log(TAG + ' openCropper result ' + JSON.stringify(image))
+ }))
+ }}
+ />
+
+
+
+
+
+ Delete File
+
+
+
+ {
+ ImagePicker.clean({}).then((image: any) => {
+ console.log(TAG + ' clean result ' + JSON.stringify(image))
+ });
+ }}
+ />
+
+
+
+ Please enter the address of the image that needs to be cleared:
+
+
+
+
+ setClearImagePath(value)}
+ value={clearImagePath}
+ />
+
+
+
+ {
+ console.log(TAG + " cleanSingle path " + clearImagePath)
+ ImagePicker.cleanSingle('/data/storage/el2/base/haps/entry/temp/rn_image_crop_picker_lib_temp_' + clearImagePath).then((image: any) => {
+
+ })
+ }}
+ />
+
+
+
+
+
+
+
+ );
}
const styles = StyleSheet.create({
- container: {
- },
- TextInputBox: {
- flexDirection: 'row',
- alignItems: 'center',
- margin: 10,
- },
- textLable: {
- width: '100%'
- },
- emptyView: {
- width: 50,
- height: 500
- },
- inputLable: {
- width: 'auto'
- },
- lableType: {
- width: '18%'
- },
- numberInput: {
- width: 50,
- height: 30,
- color: 'black',
- borderColor: 'gray',
- borderWidth: 1
- },
- textInput: {
- width: '50%',
- height: 36,
- color: 'black',
- borderColor: 'gray',
- bordeWidth: 1
- },
- switchType: {
- width: 60,
- height: 36
- },
- buttonBox: {
- marginTop: 20,
- },
- buttonSty: {
- marginTop: 0,
- marginRight: 60,
- marginBottom: 20,
- marginLeft: 60,
- textAlign: 'center'
- },
- title: {
- fontWeight: '500',
- fontSize: 20,
- marginTop: 10,
- }
+ container: {
+ },
+ TextInputBox: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ margin: 10,
+ },
+ textLable: {
+ width: '100%'
+ },
+ emptyView: {
+ width: 50,
+ height: 500
+ },
+ inputLable: {
+ width: 'auto'
+ },
+ lableType: {
+ width: '18%'
+ },
+ numberInput: {
+ width: 50,
+ height: 30,
+ color: 'black',
+ borderColor: 'gray',
+ borderWidth: 1
+ },
+ textInput: {
+ width: '50%',
+ height: 36,
+ color: 'black',
+ borderColor: 'gray',
+ bordeWidth: 1
+ },
+ switchType: {
+ width: 60,
+ height: 36
+ },
+ buttonBox: {
+ marginTop: 20,
+ },
+ buttonSty: {
+ marginTop: 0,
+ marginRight: 60,
+ marginBottom: 20,
+ marginLeft: 60,
+ textAlign: 'center'
+ },
+ title: {
+ fontWeight: '500',
+ fontSize: 20,
+ marginTop: 10,
+ }
});
export default ImageCropPickDemo;
```
diff --git a/zh-cn/react-native-image-editor.md b/zh-cn/react-native-image-editor.md
index 25f3a01dae8c416bcf3c7e5ce125c9e8398f096f..655d84d44a30be54f8e1cffdb681f99dd85d7d5b 100644
--- a/zh-cn/react-native-image-editor.md
+++ b/zh-cn/react-native-image-editor.md
@@ -70,7 +70,7 @@ interface State {
cropHorizontal: boolean;
}
-export default class ImageEditor extends Component {
+export default class ImageEditorComponent extends Component {
constructor(props: Props) {
super(props);
this.state = {
@@ -91,7 +91,7 @@ export default class ImageEditor extends Component {
offset: { x: 100, y: 100 },
size: { width: 300, height: 300 },
quality: 1,
- format: "jpeg",
+ format: "jpeg" as "jpeg",
};
if (
cropData.size.width + cropData.offset.x > this.state.photoWidth ||
@@ -113,7 +113,7 @@ export default class ImageEditor extends Component {
},
});
- if (this.state.targetSize.width >= this.state.targetSize.height) {
+ if (this.state.targetSize && this.state.targetSize.width >= this.state.targetSize.height) {
this.setState({
cropHorizontal: true,
});
diff --git a/zh-cn/react-native-maps.md b/zh-cn/react-native-maps.md
index 0420be8eb601390c4da688aa75b535d2e7da02c1..04bd8f0a2e97a3df8ff2f9e7e7c315a9b19c75b5 100644
--- a/zh-cn/react-native-maps.md
+++ b/zh-cn/react-native-maps.md
@@ -561,9 +561,9 @@ ohpm install
| mapPadding | Adds custom padding to each side of the map. Useful when map elements/markers are obscured. | EdgePadding | | no | ios/android | yes |
| paddingAdjustmentBehavior | Indicates how/when to affect padding with safe area insets (`GoogleMaps` in iOS only) | 'always' \ 'automatic' \ 'never' | 'never' | no | ios/android | no |
| liteMode | Enable [lite mode](https://developers.google.com/maps/documentation/android-sdk/lite#overview_of_lite_mode). **Note**: Android only. | Boolean | false | no | android | no |
-| mapType | The map type to be displayed. | String | "standard" | | ios/android | partially |
+| mapType | The map type to be displayed. | String | "standard" | | ios/android | partially(Support "none", "standard", "terrain") |
| customMapStyle | Adds custom styling to the map component. | Array | | no | ios/android | yes |
-| userInterfaceStyle | Sets the map to the style selected. Default is whatever the system settings is. **Note:** iOS Maps only (aka MapKit). | 'light'/'dark' | | no | ios/android | yes |
+| userInterfaceStyle | Sets the map to the style selected. Default is whatever the system settings is. **Note:** iOS Maps only (aka MapKit). | 'light'/'dark' | 'light' | no | ios/android | yes |
| showsUserLocation | If `true` the users location will be shown on the map. **NOTE**: You need runtime location permissions prior to setting this to true, otherwise it is going to _fail silently_! Checkout the excellent [react-native-permissions](https://github.com/zoontek/react-native-permissions) for this. | Boolean | false | no | ios/android | yes |
| userLocationPriority | Set power priority of user location tracking. See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html). **Note:** Android only. | 'balanced' / 'high' / 'low' / 'passive' | 'high' | no | android | no |
| userLocationUpdateInterval | Interval of user location updates in milliseconds. See [Google APIs documentation](https://developers.google.com/android/reference/com/google/android/gms/location/LocationRequest.html). **Note:** Android only. | Number | 5000 | no | android | no |
@@ -580,7 +580,7 @@ ohpm install
| showsIndoors | A Boolean indicating whether indoor maps should be enabled. | Boolean | true | no | ios/android | no |
| showsIndoorLevelPicker | A Boolean indicating whether indoor level picker should be enabled. **Note:** Google Maps only (either Android or iOS with `PROVIDER_GOOGLE`). | Boolean | false | no | ios/android | no |
| zoomEnabled | If `false` the user won't be able to pinch/zoom the map. | Boolean | true | no | ios/android | yes |
-| zoomTapEnabled | If `false` the user won't be able to double tap to zoom the map. **Note:** But it will greatly decrease delay of tap gesture recognition. **Note:** Google Maps on iOS only | Boolean | | no | ios/android | yes |
+| zoomTapEnabled | If `false` the user won't be able to double tap to zoom the map. **Note:** But it will greatly decrease delay of tap gesture recognition. **Note:** Google Maps on iOS only | Boolean | true | no | ios/android | yes |
| zoomControlEnabled | If `false` the zoom control at the bottom right of the map won't be visible **Note:** Android only. | Boolean | true | no | android | yes |
| minZoomLevel | Minimum zoom value for the map, must be between 0 and 20. **Note:** Deprecated on Apple Maps. Use cameraZoomRange instead. | Number | 0 | no | ios/android | yes |
| maxZoomLevel | Maximum zoom value for the map, must be between 0 and 20. **Note:** Deprecated on Apple Maps. Use cameraZoomRange instead. | Number | 20 | no | ios/android | yes |
@@ -645,10 +645,10 @@ ohpm install
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | -------- | -------- | ----------- | ----------------- |
| title | The title of the marker. This is only used if the component has no children that are a ``, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided. | String | | no | ios/android | yes |
| description | The description of the marker. This is only used if the component has no children that are a ``, in which case the default callout behavior will be used, which will show both the `title` and the `description`, if provided. | String | | no | ios/android | yes |
-| image | A custom image to be used as the marker's icon. Only local image resources are allowed to be used. | `ImageSource`\* | | no | ios/android | yes |
+| image | A custom image to be used as the marker's icon. Only local image resources are allowed to be used. | String | | no | ios/android | yes |
| icon | Marker icon to render (equivalent to `icon` property of GMSMarker Class). Only local image resources are allowed to be used. **Note:** Google maps only! | `ImageSource`\* | | no | ios/android | no |
| pinColor | If no custom marker view or custom image is provided, the platform default pin will be used, which can be customized by this color. Ignored if a custom marker is being used. | Color | | no | ios/android | no |
-| coordinate | The coordinate for the marker. | LatLng | | yes | ios/android | yes |
+| coordinate | The coordinate for the marker. | dynamic | | yes | ios/android | yes |
| centerOffset | The offset (in points) at which to display the view. | Point | (0, 0) | no | ios/android | no |
| calloutOffset | The offset (in points) at which to place the callout bubble. | Point | (0, 0) | no | ios/android | no |
| anchor | Sets the anchor point for the marker. | Point | (0.5, 1) | no | ios/android | yes |
@@ -694,14 +694,14 @@ ohpm install
| coordinates | An array of coordinates to describe the polyline | Array | | yes | ios/android | yes |
| strokeWidth | The stroke width to use for the path. | Number | 1 | no | ios/android | yes |
| strokeColor | The stroke color to use for the path. | String | #000, rgba(r,g,b,0.5) | no | ios/android | yes |
-| strokeColors | The stroke colors to use for the path (iOS only). Must be the same length as `coordinates`. | Array | | no | ios/android | yes |
+| strokeColors | The stroke colors to use for the path (iOS only). Must be the same length as `coordinates`. | dynamic | | no | ios/android | yes |
| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | String | round | no | ios/android | yes |
| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | String | round | no | ios/android | yes |
| miterLimit | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. | Number | | no | ios/android | no |
-| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | | no | ios/android | yes |
+| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | false | no | ios/android | yes |
| lineDashPhase | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. | Number | 0 | no | ios/android | no |
| lineDashPattern | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. | Array | | no | ios/android | yes |
-| tappable | Boolean to allow a polyline to be tappable and use the onPress function. | Bool | | no | ios/android | yes |
+| tappable | Boolean to allow a polyline to be tappable and use the onPress function. | Bool | false | no | ios/android | yes |
注:HarmonyOS 侧的 lineJoin 支持以下字符串值
@@ -725,7 +725,7 @@ ohpm install
| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | String | round | no | ios/android | no |
| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | String | round | no | ios/android | yes |
| miterLimit | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. | Number | | no | ios/android | no |
-| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | | no | ios/android | yes |
+| geodesic | Boolean to indicate whether to draw each segment of the line as a geodesic as opposed to straight lines on the Mercator projection. A geodesic is the shortest path between two points on the Earth's surface. The geodesic curve is constructed assuming the Earth is a sphere. | Boolean | false | no | ios/android | yes |
| lineDashPhase | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. | Number | 0 | no | ios/android | no |
| lineDashPattern | (iOS only) An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. | Array | | no | ios/android | yes |
| tappable | Boolean to allow a polygon to be tappable and use the onPress function. | Bool | false | no | ios/android | yes |
@@ -767,11 +767,11 @@ ohpm install
| Name | Description | Type | Default | Required | Platform | HarmonyOS Support |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | ------- | -------- | ----------- | ----------------- |
-| image | A custom image to be used as the overlay. Only required local image resources and uri (as for images located in the net) are allowed to be used. | ImageSource | | yes | ios/android | yes |
+| image | A custom image to be used as the overlay. Only required local image resources and uri (as for images located in the net) are allowed to be used. | String | | yes | ios/android | yes |
| bounds | The coordinates for the image (bottom-left corner, top-right corner). ie.`[[lat, long], [lat, long]]` | Array | | yes | ios/android | yes |
| bearing | `Google Maps API only` The bearing in degrees clockwise from north. Values outside the range [0, 360) will be normalized. | Number | 0 | no | ios/android | yes |
| tappable | `Android only` Boolean to allow an overlay to be tappable and use the onPress function. | Bool | false | no | ios/android | yes |
-| opacity | `Google maps only` The opacity of the overlay. | Number | 1.0 | no | ios/android | yes |
+| opacity | `Google maps only` The opacity of the overlay. | Float | 1.0 | no | ios/android | yes |
### 静态方法
@@ -833,8 +833,8 @@ ohpm install
| color | The color to use for points. | String | `marker-color` property in GeoJson | no | ios/android | no |
| lineDashPhase | (iOS only) The offset (in points) at which to start drawing the dash pattern. Use this property to start drawing a dashed line partway through a segment or gap. For example, a phase value of 6 for the patter 5-2-3-2 would cause drawing to begin in the middle of the first gap. | Number | | no | ios | no |
| lineDashPattern | An array of numbers specifying the dash pattern to use for the path. The array contains one or more numbers that indicate the lengths (measured in points) of the line segments and gaps in the pattern. The values in the array alternate, starting with the first line segment length, followed by the first gap length, followed by the second line segment length, and so on. | Array | | no | ios/android | yes |
-| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | 'butt' / 'round' / 'square' | | no | ios/android | yes |
-| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | 'miter' / 'round' / 'bevel' | | no | ios/android | yes |
+| lineCap | The line cap style to apply to the open ends of the path. Possible values are `butt`, `round` or `square`. Note: lineCap is not yet supported for GoogleMaps provider on iOS. | 'butt' / 'round' / 'square' | 'round' | no | ios/android | yes |
+| lineJoin | The line join style to apply to corners of the path. Possible values are `miter`, `round` or `bevel`. | 'miter' / 'round' / 'bevel' | 'round' | no | ios/android | yes |
| miterLimit | The limiting value that helps avoid spikes at junctions between connected line segments. The miter limit helps you avoid spikes in paths that use the `miter` `lineJoin` style. If the ratio of the miter length—that is, the diagonal length of the miter join—to the line thickness exceeds the miter limit, the joint is converted to a bevel join. The default miter limit is 10, which results in the conversion of miters whose angle at the joint is less than 11 degrees. | Number | | no | ios/android | no |
| zIndex | Layer level of the z-index value | Number | | no | ios/android | yes |
| onPress | returns the selected overlay value with the onPress functionality | Function | | no | ios/android | yes |
@@ -858,7 +858,7 @@ ohpm install
| -------- | ----------------------------------------------------------------- | --------------------- | ------- | -------- | ----------- | ----------------- |
| points | Array of heatmap entries to apply towards density. | Array | | no | ios/android | no |
| radius | The radius of the heatmap points in pixels, between 10 and 50. | Number | 20 | no | ios/android | no |
-| opacity | The opacity of the heatmap. | Number | 0.7 | no | ios/android | no |
+| opacity | The opacity of the heatmap. | Float | 0.7 | no | ios/android | no |
| gradient | Heatmap gradient configuration (See below for _Gradient Config_). | Object | | no | ios/android | no |
#### Gradient Config
diff --git a/zh-cn/react-native-reanimated-carousel.md b/zh-cn/react-native-reanimated-carousel.md
index c584db35b96fc6d1fc3f3bd944cd1e93c7e1664b..2d1082c0d04b64d22398915399f0b78a9ec28555 100644
--- a/zh-cn/react-native-reanimated-carousel.md
+++ b/zh-cn/react-native-reanimated-carousel.md
@@ -196,39 +196,39 @@ const styles = StyleSheet.create({
### Basic Props
-| Name | Description | Required | Default | Type | Platform | HarmonyOS Support |
-| --- | --- | --- | --- | --- | --- | --- |
-| data | Carousel items data set | yes | | T[] | All | yes |
-| renderItem | Render carousel item | yes | | (info: { item: T, index: number, animationValue: SharedValue\ }) => React.ReactElement | All | yes |
-| defaultScrollOffsetValue | The default animated value of the carousel. | no | useSharedValue(0) | boolean | All | yes |
-| autoFillData | Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1];[1, 2] => [1, 2, 1, 2]) | no | true | boolean | All | yes |
-| vertical | Layout items vertically instead of horizontally | no | false | boolean | All | yes |
-| width | Specified carousel item width | `vertical` no `horizontal` yes | '100%' | number \| undefined | All | yes |
-| height | Specified carousel item height | `vertical` yes `horizontal` no | '100%' | number \| undefined | All | yes |
-| mode | Carousel Animated transitions | no | default | 'horizontal-stack'\|'vertical-stack'\|'parallax' | All | yes |
-| modeConfig | Stack layout animation style. Different modes correspond to different configurations | no | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | | All | yes |
-| style | Carousel container style | no | {} | ViewStyle | All | yes |
-| defaultIndex | Default index | no | 0 | number | All | yes |
-| autoPlay | Auto play | no | false | boolean | All | yes |
-| autoPlayReverse | Auto play reverse playback | no | false | boolean | All | yes |
-| autoPlayInterval | Auto play playback interval | no | 1000 | number | All | yes |
-| scrollAnimationDuration | Time a scroll animation takes to finish | no | 500 | number | All | yes |
-| loop | Carousel loop playback | no | true | boolean | All | yes |
-| testID | Used to locate this view in end-to-end tests | no | | string | All | yes |
-| onSnapToItem | Callback fired when navigating to an item | no | | (index: number) => void | All | yes |
-| onScrollBegin | Callback fired when scroll begin | no | | () => void | All | yes |
-| onScrollEnd | Callback fired when scroll end | no | | (index: number) => void | All | yes |
-| withAnimation | Specifies the scrolling animation effect | no | | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | All | yes |
-| panGestureHandlerProps | PanGestureHandler props | no | {} | Omit,'onHandlerStateChange'> | All | yes |
-| windowSize | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events | no | 0 | number | All | yes |
-| onProgressChange | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) | no | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | All | yes |
-| pagingEnabled | When true, the scroll view stops on multiples of the scroll view's size when scrolling | no | true | boolean | All | yes |
-| overscrollEnabled | If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false) | no | true | boolean | All | yes |
-| snapEnabled | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | no | true | boolean | All | yes |
-| enabled | when false, Carousel will not respond to any gestures | no | true | boolean | All | yes |
-| customConfig | Custom carousel config | no | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | All | yes |
-| customAnimation | Custom animations | no | | (value: number) => Animated.AnimatedStyleProp | All | yes |
-| maxScrollDistancePerSwipe | Maximum offset value for one scroll. If `props.vertical = true`, this will be `maxScrollDistancePerSwipeY`. If `props.vertical = false`, this will be `maxScrollDistancePerSwipeX`. | no | | number | All | yes |
+| Name | Description | Required | Default | Type | Platform | HarmonyOS Support |
+| ------------------------- | ------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------------- |
+| data | Carousel items data set | yes | | T[] | All | yes |
+| renderItem | Render carousel item | yes | | (info: { item: T, index: number, animationValue: SharedValue\ }) => React.ReactElement | All | yes |
+| defaultScrollOffsetValue | The default animated value of the carousel. | no | useSharedValue(0) | boolean | All | yes |
+| autoFillData | Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1];[1, 2] => [1, 2, 1, 2]) | no | true | boolean | All | yes |
+| vertical | Layout items vertically instead of horizontally | no | false | boolean | All | yes |
+| width | Specified carousel item width | `vertical` no `horizontal` yes | '100%' | number \| undefined | All | yes |
+| height | Specified carousel item height | `vertical` yes `horizontal` no | '100%' | number \| undefined | All | yes |
+| mode | Carousel Animated transitions | no | default | 'horizontal-stack'\|'vertical-stack'\|'parallax' | All | yes |
+| modeConfig | Stack layout animation style. Different modes correspond to different configurations | no | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | | All | yes |
+| style | Carousel container style | no | {} | ViewStyle | All | yes |
+| defaultIndex | Default index | no | 0 | number | All | yes |
+| autoPlay | Auto play | no | false | boolean | All | yes |
+| autoPlayReverse | Auto play reverse playback | no | false | boolean | All | yes |
+| autoPlayInterval | Auto play playback interval | no | 1000 | number | All | yes |
+| scrollAnimationDuration | Time a scroll animation takes to finish | no | 500 | number | All | yes |
+| loop | Carousel loop playback | no | true | boolean | All | yes |
+| testID | Used to locate this view in end-to-end tests | no | | string | All | yes |
+| onSnapToItem | Callback fired when navigating to an item | no | | (index: number) => void | All | yes |
+| onScrollBegin | Callback fired when scroll begin | no | | () => void | All | yes |
+| onScrollEnd | Callback fired when scroll end | no | | (index: number) => void | All | yes |
+| withAnimation | Specifies the scrolling animation effect | no | | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | All | yes |
+| panGestureHandlerProps | PanGestureHandler props | no | {} | Omit,'onHandlerStateChange'> | All | yes |
+| windowSize | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events | no | 0 | number | All | yes |
+| onProgressChange | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) | no | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | All | yes |
+| pagingEnabled | When true, the scroll view stops on multiples of the scroll view's size when scrolling | no | true | boolean | All | yes |
+| overscrollEnabled | If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false) | no | true | boolean | All | yes |
+| snapEnabled | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | no | true | boolean | All | yes |
+| enabled | when false, Carousel will not respond to any gestures | no | true | boolean | All | yes |
+| customConfig | Custom carousel config | no | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | All | yes |
+| customAnimation | Custom animations | no | | (value: number) => Animated.AnimatedStyleProp | All | yes |
+| maxScrollDistancePerSwipe | Maximum offset value for one scroll. If `props.vertical = true`, this will be `maxScrollDistancePerSwipeY`. If `props.vertical = false`, this will be `maxScrollDistancePerSwipeX`. | no | | number | All | yes |
### `modeConfig` Parallax
diff --git a/zh-cn/react-native-reanimated-table.md b/zh-cn/react-native-reanimated-table.md
index aa0be7f634708236b518ef88625ed9ae095454d0..992a70628ab8d065bfdf7406b247381ffaad7ce4 100644
--- a/zh-cn/react-native-reanimated-table.md
+++ b/zh-cn/react-native-reanimated-table.md
@@ -25,7 +25,7 @@
#### npm
```bash
-npm install react-native-reanimated-table@^0.0.2
+npm install react-native-reanimated-table@0.0.2
```
#### yarn
@@ -110,13 +110,13 @@ const styles = StyleSheet.create({
| Name | Description | **Type** | Required | Platform | HarmonyOS Support |
| ------------------------- | ------------------------------------------------------------ | -------- | ----------- | ----------------- | ----------------- |
| data | Table data. | Array | Yes | All | Yes |
-| style | Container style. | Style | Yes | All | Yes |
-| borderStyle | Table border line width and color. | Object | Yes | All | Yes |
-| textStyle | Cell font style. | Style | Yes | All | Yes |
-| flexArr | Flex value per column. | Array | Yes | All | Yes |
-| widthArr | Width per column. | Array | Yes | All | Yes |
-| heightArr | Height per line. | Array | Yes | All | Yes |
-| ...props | more props | any | Yes | All | Yes |
+| style | Container style. | Style | No | All | Yes |
+| borderStyle | Table border line width and color. | Object | No | All | Yes |
+| textStyle | Cell font style. | Style | No | All | Yes |
+| flexArr | Flex value per column. | Array | No | All | Yes |
+| widthArr | Width per column. | Array | No | All | Yes |
+| heightArr | Height per line. | Array | No | All | Yes |
+| ...props | more props | any | No | All | Yes |
## 其他
diff --git a/zh-cn/react-native-sensors.md b/zh-cn/react-native-sensors.md
index 707ee35a408996df459452498568d66dca3b649a..8af4ffa85561c99f1add68e833620d82aa24391c 100644
--- a/zh-cn/react-native-sensors.md
+++ b/zh-cn/react-native-sensors.md
@@ -38,47 +38,101 @@ yarn add @react-native-ohos/react-native-sensors
> [!WARNING] 使用时 import 的库名不变。
```js
-import {
- accelerometer,
- gyroscope,
- setUpdateIntervalForType,
- magnetometer,
- barometer,
- orientation,
- gravity,
-} from "react-native-sensors";
-
-//accelerometer 加速度计 accelerometer: Observable<{x: number, y: number, z: number, timestamp: string}>
-accelerometer.subscribe(({ x, y, z, timestamp }) =>
- console.log("accelerometer", { x, y, z, timestamp })
-);
-
-//gyroscope 陀螺仪 gyroscope: Observable<{x: number, y: number, z: number, timestamp: string}>
-gyroscope
- .pipe(filter((speed) => speed.x > 1))
- .subscribe(({ x, y, z, timestamp }) =>
- console.log("gyroscope", { x, y, z, timestamp })
- );
-
-//magnetometer 磁力计 magnetometer: Observable<{x: number, y: number, z: number, timestamp: string}>
-magnetometer.subscribe(({ x, y, z, timestamp }) =>
- console.log("magnetometer", { x, y, z, timestamp })
-);
-
-//barometer 气压计 barometer: Observable<{pressure: number}>
-barometer.subscribe(({ pressure }) => console.log("barometer", { pressure }));
-
-//orientation 方向 orientation: Observable<{x: number, y: number, z: number, timestamp: string}>
-orientation.subscribe(({ x, y, z, timestamp }) =>
- console.log("orientation", { x, y, z, timestamp })
-);
-
-//gravity 重力 gravity: Observable<{x: number, y: number, z: number, timestamp: string}>
-gravity.subscribe(({ x, y, z, timestamp }) =>
- console.log("gravity", { x, y, z, timestamp })
-);
-// setUpdateIntervalForType(type: string, interval: number)
-setUpdateIntervalForType(SensorTypes.accelerometer, 100);
+import React from "react";
+import { Alert } from "react-native";
+import { Subscription } from "rxjs";
+import { Button, View, Text, TextInput, StyleSheet } from 'react-native';
+import { accelerometer, gyroscope, magnetometer, barometer, orientation, gravity, setUpdateIntervalForType, setLogLevelForType } from 'react-native-sensors';
+export const App = () => {
+ const [value, setValue] = React.useState('15');
+ const [sensors, setSensorsValue] = React.useState('');
+ const [IsProintLog, setIsProintLog] = React.useState(true);
+ const setInterVal = () => {
+ if(!sensors) return
+ if (IsProintLog) {
+ setUpdateIntervalForType(sensors, value);
+ setIsProintLog(false)
+ let sensorsSubscription: Subscription;
+ switch (sensors) {
+ case 'accelerometer':
+ sensorsSubscription = accelerometer.subscribe();
+ break;
+ case 'gyroscope':
+ sensorsSubscription = gyroscope.subscribe();
+ break;
+ case 'magnetometer':
+ sensorsSubscription = magnetometer.subscribe();
+ break;
+ case 'barometer':
+ sensorsSubscription = barometer.subscribe();
+ break;
+ case 'orientation':
+ sensorsSubscription = orientation.subscribe();
+ break;
+ case 'gravity':
+ sensorsSubscription = gravity.subscribe();
+ break;
+ default:
+ }
+ const timer = setTimeout(() => {
+ sensorsSubscription.unsubscribe();
+ clearTimeout(timer)
+ setIsProintLog(true)
+ }, 5000);
+ }
+ }
+ const setLogLevel0 = () => {
+ setLogLevelForType(sensors, 0)
+ }
+ const setLogLevel1 = () => {
+ setLogLevelForType(sensors, 1)
+ }
+ const setLogLevel2 = () => {
+ setLogLevelForType(sensors, 2)
+ }
+ const handleChangeText = (text:string) => {
+ if (!text) {
+ Alert.alert('请输入间隔时间,且不能为空!');
+ return
+ }
+ const numericValue = text.replace(/[^0-9]/g, "");
+ setValue(numericValue);
+ }
+ const styles = StyleSheet.create({
+ divider: {
+ height: 1,
+ backgroundColor: '#CCCCCC',
+ marginVertical: 5,
+ }
+ })
+ return (
+
+ 操作流程:1、输入间隔时间。2、选择传感器类型。3、选择输出日志级别。4、点击日志打印按钮。请保证设备支持
+
+ setUpdateIntervalForType设置数据采集频率
+
+ { setSensorsValue('accelerometer') }} title="accelerometer">
+
+ { setSensorsValue('gyroscope') }} title="gyroscope">
+
+ { setSensorsValue('magnetometer') }} title="magnetometer">
+
+ { setSensorsValue('barometer') }} title="barometer">
+
+ { setSensorsValue('orientation') }} title="orientation">
+
+ { setSensorsValue('gravity') }} title="gravity">
+
+
+
+
+
+
+
+
+ )
+}
+export default App;
```
## 2. Manual Link
diff --git a/zh-cn/react-native-simple-toast.md b/zh-cn/react-native-simple-toast.md
index 0ae2113e2a5edf480ea0e08424dc174f1e8206d4..02d9de5274633b3187b404ae919b2db388792135 100644
--- a/zh-cn/react-native-simple-toast.md
+++ b/zh-cn/react-native-simple-toast.md
@@ -58,9 +58,10 @@ import {
import Toast from 'react-native-simple-toast';
import { useState } from 'react';
-export default function App() {
- const [modalVisible, setModalVisible] = useState(false);
+
+const ToastTest = () => {
+ const [modalVisible, setModalVisible] = useState(false);
return (
<>
-
- {
- Toast.show('This is a toast.', Toast.SHORT);
- }}
- />
- {
- Toast.show('Tap to dismiss toast.', Toast.LONG, {
- tapToDismissEnabled: true,
- });
- }}
- />
-
-
- >
+
+ {
+ Toast.show('This is a toast.', Toast.SHORT);
+ }}
+ />
+
+ {
+ Toast.show('Tap to dismiss toast.', Toast.LONG, {
+ tapToDismissEnabled: true,
+ });
+ }}
+ />
+
+
+ >
);
-}
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: 16,
+ backgroundColor: '#fff',
+ },
+ centeredView: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: 'rgba(0,0,0,0.3)',
+ },
+ modalView: {
+ margin: 20,
+ backgroundColor: 'white',
+ borderRadius: 8,
+ padding: 32,
+ alignItems: 'center',
+ shadowColor: '#000',
+ shadowOffset: { width: 0, height: 2 },
+ shadowOpacity: 0.25,
+ shadowRadius: 4,
+ elevation: 5,
+ },
+ modalText: {
+ marginBottom: 16,
+ textAlign: 'center',
+ fontSize: 18,
+ color: '#333',
+ },
+ button: {
+ borderRadius: 8,
+ paddingVertical: 10,
+ paddingHorizontal: 20,
+ elevation: 2,
+ backgroundColor: '#2196F3',
+ },
+ buttonClose: {
+ backgroundColor: '#f44336',
+ marginTop: 12,
+ },
+ textStyle: {
+ color: 'white',
+ fontWeight: 'bold',
+ textAlign: 'center',
+ },
+});
+
+export default ToastTest;
```
## 约束与限制
@@ -130,9 +187,9 @@ RNOH:0.72.23; SDK:HarmonyOS NEXT Developer Beta1; IDE:DevEco Studio 5.0.3.
| Name | Description | Required | Platform | HarmonyOS Support |
| ---------------------- |---------------------------| -------- |----------|-------------------|
-| show(message, duration, options) | 吐司 | No | All | partially |
-| showWithGravity(message, duration, gravity, options) | 可设置top,bottom和center位置的吐司 | No | All | No |
-| showWithGravityAndOffset(message,duration,gravity,xOffset,yOffset,options,); | 可设置x轴和y轴偏移的吐司 | No | All | No |
+| show(message, duration, options) | 展示轻提示 | No | All | partially |
+| showWithGravity(message, duration, gravity, options) | 可设置为顶部、底部和居中位置的轻提示 | No | All | No |
+| showWithGravityAndOffset(message,duration,gravity,xOffset,yOffset,options,); | 可设置x轴和y轴偏移的轻提示 | No | All | No |
## 属性
diff --git a/zh-cn/react-native-skia.md b/zh-cn/react-native-skia.md
index 1105cbe89a1a7af4c4010c987038575fef485451..1d06a7ce1f9c43bbc4fb69ab886c507141ead27b 100644
--- a/zh-cn/react-native-skia.md
+++ b/zh-cn/react-native-skia.md
@@ -990,7 +990,7 @@ ohpm install
| ------ | ---------------------------------------------------------- | ------- | -------- | ----------- | ----------------- |
| glyphs | Glyphs to draw | Glyph[] | yes | android/ios | yes |
| x | x coordinate of the origin of the entire run. Default is 0 | number | no | android/ios | yes |
-| y | y coordinate of the origin of the entire run. Default is 0 | number | yno | android/ios | yes |
+| y | y coordinate of the origin of the entire run. Default is 0 | number | no | android/ios | yes |
| font | Font to use | SkFont | yes | android/ios | yes |
### TextPath
@@ -1065,4 +1065,4 @@ ohpm install
## 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-skia/blob/sig/LICENSE.md) ,请自由地享受和参与开源。
+本项目基于 [The MIT License (MIT)](https://github.com/Shopify/react-native-skia/blob/main/LICENSE.md) ,请自由地享受和参与开源。
\ No newline at end of file
diff --git a/zh-cn/react-native-spring-scrollview.md b/zh-cn/react-native-spring-scrollview.md
index 89c7c94af04f352ac1789fcb35567e91161480fb..2c35a74970cc26afbe9b4831b49bcd2a33d908c7 100644
--- a/zh-cn/react-native-spring-scrollview.md
+++ b/zh-cn/react-native-spring-scrollview.md
@@ -328,38 +328,38 @@ ohpm install
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
-| contentStyle | set content style | ViewStyle | yes | iOS/Android | yes |
-| bounces | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction. | boolean | yes | iOS/Android | yes |
-| scrollEnabled | scrollEnabled | boolean | yes | iOS/Android | yes |
-| directionalLockEnabled | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging. | boolean | yes | iOS/Android | yes |
-| initialContentOffset | initial content offset. Only works when initiation. | Offset | yes | iOS/Android | yes |
-| showsVerticalScrollIndicator | showsVerticalScrollIndicator | boolean | yes | iOS/Android | no |
-| showsHorizontalScrollIndicator | showsHorizontalScrollIndicator | boolean | yes | iOS/Android | no |
-| refreshHeader | refresh header | React.ComponentClass | yes | iOS/Android | yes |
-| loadingFooter | loading header | React.ComponentClass | yes | iOS/Android | yes |
-| onRefresh | he callback when refreshing. When this props is configured, a refresh header will be add on the top of the SpringScrollView | ()=>any | yes | iOS/Android | yes |
-| onLoading() | The callback of loading. If set this prop, a loading footer will add to the botom of the SpringScrollView | ()=>any | yes | iOS/Android | yes |
-| allLoaded | Whether the data is all loaded. | boolean | yes | iOS/Android | yes |
-| textInputRefs | text input | any[] | yes | iOS/Android | yes |
-| inverted | inverted. It is a service for LargeList. | boolean | yes | iOS/Android | yes |
-| inputToolBarHeight | set height of the input toolbar | number | yes | iOS/Android | yes |
-| dragToHideKeyboard | hide the currently displayed keyboard | boolean | yes | iOS/Android | yes |
-| onTouchBegin() | begin touch | ()=>any | yes | iOS/Android | yes|
-| onTouchEnd() | touch finished | ()=>any | yes | iOS/Android | yes|
-| beginRefresh() | If you want to begin refreshing programally without finger draging, call this method after initialized. | Promise | yes | iOS/Android | yes|
-| endRefresh() | End the refreshing status. | void | yes | iOS/Android | yes|
-| endLoading() | End the loading status. | void | yes | iOS/Android | yes|
-| scrollTo() | animate scroll to a specific position | Promise | yes | iOS/Android | yes|
-| scroll() | scroll animation to a specific position | Promise | yes | iOS/Android | yes|
-| scrollToBegin() | scroll begin | Promise | yes | iOS/Android | yes|
-| scrollToEnd() | scroll end | Promise | yes | iOS/Android | yes|
-| onScroll() | scroll | (evt: ScrollEvent) => any | yes | iOS/Android | yes|
-| onNativeContentOffsetExtract | calculate content offset | NativeContentOffset | yes | iOS/Android | yes|
-| onScrollBeginDrag() | an event that is triggered when the user starts dragging (scrolling) content. | ()=>any | yes | iOS/Android | yes|
-| onMomentumScrollBegin() | When the user scrolls content and the momentum scroll animation begins, it triggers an event. | ()=>any | yes | iOS/Android | yes|
-| onMomentumScrollEnd() | When the user scrolls content and the momentum scroll animation ends, it triggers an event. | ()=>any | yes | iOS/Android | yes|
-| onSizeChange | The callback when the wrapper view size changed. | (size: Size) => any | yes | iOS/Android | yes |
-| onContentSizeChange | The callback when the content view size changed. | (size: Size) => any | yes | iOS/Android | yes |
+| contentStyle | set content style | ViewStyle | no | iOS/Android | yes |
+| bounces | Bounces if the content offset is out of the content view. It won't be bounces on the horizontal direction if the content view is not wider than the wrapper view although bounces is true. But it will on the vertical direction. | boolean | no | iOS/Android | yes |
+| scrollEnabled | scrollEnabled | boolean | no | iOS/Android | yes |
+| directionalLockEnabled | When true, the SpringScrollView will try to lock to only vertical or horizontal scrolling while dragging. | boolean | no | iOS/Android | yes |
+| initialContentOffset | initial content offset. Only works when initiation. | Offset | no | iOS/Android | yes |
+| showsVerticalScrollIndicator | showsVerticalScrollIndicator | boolean | no | iOS/Android | no |
+| showsHorizontalScrollIndicator | showsHorizontalScrollIndicator | boolean | no | iOS/Android | no |
+| refreshHeader | refresh header | React.ComponentClass | no | iOS/Android | yes |
+| loadingFooter | loading header | React.ComponentClass | no | iOS/Android | yes |
+| onRefresh | he callback when refreshing. When this props is configured, a refresh header will be add on the top of the SpringScrollView | ()=>any | no | iOS/Android | yes |
+| onLoading() | The callback of loading. If set this prop, a loading footer will add to the botom of the SpringScrollView | ()=>any | no | iOS/Android | yes |
+| allLoaded | Whether the data is all loaded. | boolean | no | iOS/Android | yes |
+| textInputRefs | text input | any[] | no | iOS/Android | yes |
+| inverted | inverted. It is a service for LargeList. | boolean | no | iOS/Android | yes |
+| inputToolBarHeight | set height of the input toolbar | number | no | iOS/Android | yes |
+| dragToHideKeyboard | hide the currently displayed keyboard | boolean | no | iOS/Android | yes |
+| onTouchBegin() | begin touch | ()=>any | no | iOS/Android | yes |
+| onTouchEnd() | touch finished | ()=>any | no | iOS/Android | yes |
+| beginRefresh() | If you want to begin refreshing programally without finger draging, call this method after initialized. | Promise | no | iOS/Android | yes |
+| endRefresh() | End the refreshing status. | void | no | iOS/Android | yes |
+| endLoading() | End the loading status. | void | no | iOS/Android | yes |
+| scrollTo() | animate scroll to a specific position | Promise | no | iOS/Android | yes |
+| scroll() | scroll animation to a specific position | Promise | no | iOS/Android | yes |
+| scrollToBegin() | scroll begin | Promise | no | iOS/Android | yes |
+| scrollToEnd() | scroll end | Promise | no | iOS/Android | yes |
+| onScroll() | scroll | (evt: ScrollEvent) => any | no | iOS/Android | yes |
+| onNativeContentOffsetExtract | calculate content offset | NativeContentOffset | no | iOS/Android | yes |
+| onScrollBeginDrag() | an event that is triggered when the user starts dragging (scrolling) content. | ()=>any | no | iOS/Android | yes |
+| onMomentumScrollBegin() | When the user scrolls content and the momentum scroll animation begins, it triggers an event. | ()=>any | no | iOS/Android | yes |
+| onMomentumScrollEnd() | When the user scrolls content and the momentum scroll animation ends, it triggers an event. | ()=>any | no | iOS/Android | yes |
+| onSizeChange | The callback when the wrapper view size changed. | (size: Size) => any | no | iOS/Android | yes |
+| onContentSizeChange | The callback when the content view size changed. | (size: Size) => any | no | iOS/Android | yes |
## 遗留问题