diff --git a/en/react-native-image-sequence-2.md b/en/react-native-image-sequence-2.md
index 820e29b95b261e468fbe9e8ddb00fed653f00bd6..850033763715d26226ae6ee9146c586bb537c8ae 100644
--- a/en/react-native-image-sequence-2.md
+++ b/en/react-native-image-sequence-2.md
@@ -40,240 +40,39 @@ The following code shows the basic use scenario of the repository:
> [!WARNING] The name of the imported repository remains unchanged.
-TestDemo.tsx
-
-```js
-import React, { useState } from "react";
-import { SafeAreaView, StyleSheet } from "react-native-harmony";
-import { View, Text, Switch, TextInput, Button } from "react-native";
-import TestDemo2 from "./TestDemo2";
-
-const images = [
- { uri: "https://octodex.github.com/images/stormtroopocat.jpg" },
- { uri: 'https://octodex.github.com/images/saint_nictocat.jpg' },
- require("./assets/2.jpg"),
- require("./assets/3.jpg"),
- require("./assets/4.jpg"),
- require("./assets/5.jpg"),
- require("./assets/6.jpg"),
-];
-
-export interface sequenceType {
- images: NodeRequire[];
- loop: boolean;
- startFrameIndex: number;
- framesPerSecond: number;
- downsampleWidth: number;
- downsampleHeight: number;
-}
-
-const ImageSequenceDemo = (props: any) => {
- const [loopData, setLoopData] = useState(false);
- const [isShow, setIsShow] = useState(false);
- const [winWidth, setWinWidth] = useState(300);
- const [winHeight, setWinHeight] = useState(200);
- const [downsampleWidth, setDownSampleWidth] = useState(-1);
- const [downsampleHeight, setDownSampleHeight] = useState(-1);
-
- // Set Sampling Width
- const inputSampleWidth = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setDownSampleWidth(Number(value));
- };
-
- // Set Sampling Height
- const inputSampleHeight = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setDownSampleHeight(Number(value));
- };
-
- // Set Starting Position
- const [startFrameIndex, setFrameIndex] = useState(0);
- const inputStartFrameIndex = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- let _value = Number(value);
- if (Number(value) > images.length) {
- _value = 0;
- }
- setFrameIndex(_value);
- };
-
- // Set Rate
- const [framesPerSecond, setFramesPerSecond] = useState(24);
- const inputFramesPerSecond = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- let _value = Number(value);
- if (Number(value) <= 0) {
- _value = 24;
- }
- setFramesPerSecond(_value);
- };
-
- const buttonIsShow = () => {
- setIsShow(!isShow);
- };
-
- const inputSetWinWidth = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setWinWidth(Number(value));
- };
-
- const inputSetWinHeight = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setWinHeight(Number(value));
- };
-
- return (
-
-
-
-
- Current view size:width: {winWidth}, height:{winHeight}
-
-
- Activate Loop: setLoopData(value)}>
-
-
- Image Width/Height:
-
- inputSetWinWidth(value)}
- defaultValue="300"
- keyboardType="numeric"
- />
- inputSetWinHeight(value)}
- defaultValue="200"
- keyboardType="numeric"
- />
-
-
- Initial Position:
- inputStartFrameIndex(value)}
- defaultValue="0"
- keyboardType="numeric"
- />
- Playback Speed:
- inputFramesPerSecond(value)}
- defaultValue="24"
- keyboardType="numeric"
- />
-
- Sampling Width/Height:
-
- inputSampleWidth(value)} defaultValue='-1' keyboardType='default' />
- inputSampleHeight(value)} defaultValue='-1' keyboardType='default' />
-
-
-
- {!isShow ? (
-
-
- );
-};
-const styles = StyleSheet.create({
- continer: {
- flex: 1,
- justifyContent: "center",
- width: "100%",
- height: "100%",
- },
- title: {
- textAlign: "center",
- marginVertical: 8,
- },
- fixToText: {
- flexDirection: "row",
- justifyContent: "space-between",
- },
- separator: {
- marginVertical: 8,
- borderBottomColor: "#737373",
- borderBottomWidth: StyleSheet.hairlineWidth,
- },
- input: {
- height: 40,
- margin: 12,
- borderWidth: 1,
- borderColor: "red",
- padding: 10,
- width: 200,
- },
- box: {
- flexDirection: "row",
- justifyContent: "flex-start",
- },
- input1: {
- width: 100,
- },
-});
-
-export default ImageSequenceDemo;
-```
-
-TestDemo2.tsx
-
```js
import { StyleSheet, View } from "react-native";
import ImageSequence from 'react-native-image-sequence-2'
-
-const Separator = () =>
-const TestDemo2 = (props: any) => {
+const images = [
+ { uri: "https://octodex.github.com/images/stormtroopocat.jpg" },
+ { uri: 'https://octodex.github.com/images/saint_nictocat.jpg' },
+ require("./assets/2.jpg"),
+ require("./assets/3.jpg"),
+ require("./assets/4.jpg"),
+ require("./assets/5.jpg"),
+ require("./assets/6.jpg"),
+];
+const centerIndex = Math.floor(Math.random() * images.length);
+const TestDemo = () => {
return (
-
+
+
+
)
}
const styles = StyleSheet.create({
- separator: {
- marginVertical: 8,
- borderBottomColor: '#737373',
- borderBottomWidth: StyleSheet.hairlineWidth
- }
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
})
-export default TestDemo2
+export default TestDemo
```
## 2. Use Codegen
diff --git a/en/react-native-ssl-pinning.md b/en/react-native-ssl-pinning.md
index 6a7f119df273b968f470b61b37d46e16a7ab4ca6..cfc7c8dbba5cef0c2597f27572dd246331edaea4 100644
--- a/en/react-native-ssl-pinning.md
+++ b/en/react-native-ssl-pinning.md
@@ -65,7 +65,7 @@ import {
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {getCookies, fetch, removeCookieByName} from 'react-native-ssl-pinning';
-import FileSelector from '@react-native-ohos/react-native-file-selector';
+import FileSelector from 'react-native-file-selector';
function SslPingDemo() : React.JSX.Element{
return (
<>
diff --git a/zh-cn/react-native-image-sequence-2.md b/zh-cn/react-native-image-sequence-2.md
index 306d3ed2f422568adfd44b22dba38d3d121c7677..e257b51f5d731974c961e0fdd526ad558fd34322 100644
--- a/zh-cn/react-native-image-sequence-2.md
+++ b/zh-cn/react-native-image-sequence-2.md
@@ -41,240 +41,39 @@ yarn add @react-native-ohos/react-native-image-sequence-2
> [!WARNING] 使用时 import 的库名不变。
-TestDemo.tsx
-
-```js
-import React, { useState } from "react";
-import { SafeAreaView, StyleSheet } from "react-native-harmony";
-import { View, Text, Switch, TextInput, Button } from "react-native";
-import TestDemo2 from "./TestDemo2";
-
-const images = [
- { uri: "https://octodex.github.com/images/stormtroopocat.jpg" },
- { uri: 'https://octodex.github.com/images/saint_nictocat.jpg' },
- require("./assets/2.jpg"),
- require("./assets/3.jpg"),
- require("./assets/4.jpg"),
- require("./assets/5.jpg"),
- require("./assets/6.jpg"),
-];
-
-export interface sequenceType {
- images: NodeRequire[];
- loop: boolean;
- startFrameIndex: number;
- framesPerSecond: number;
- downsampleWidth: number;
- downsampleHeight: number;
-}
-
-const ImageSequenceDemo = (props: any) => {
- const [loopData, setLoopData] = useState(false);
- const [isShow, setIsShow] = useState(false);
- const [winWidth, setWinWidth] = useState(300);
- const [winHeight, setWinHeight] = useState(200);
- const [downsampleWidth, setDownSampleWidth] = useState(-1);
- const [downsampleHeight, setDownSampleHeight] = useState(-1);
-
- // 设置采样宽度
- const inputSampleWidth = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setDownSampleWidth(Number(value));
- };
-
- // 设置采样高度
- const inputSampleHeight = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setDownSampleHeight(Number(value));
- };
-
- // 设置起始位置
- const [startFrameIndex, setFrameIndex] = useState(0);
- const inputStartFrameIndex = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- let _value = Number(value);
- if (Number(value) > images.length) {
- _value = 0;
- }
- setFrameIndex(_value);
- };
-
- // 设置速率
- const [framesPerSecond, setFramesPerSecond] = useState(24);
- const inputFramesPerSecond = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- let _value = Number(value);
- if (Number(value) <= 0) {
- _value = 24;
- }
- setFramesPerSecond(_value);
- };
-
- const buttonIsShow = () => {
- setIsShow(!isShow);
- };
-
- const inputSetWinWidth = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setWinWidth(Number(value));
- };
-
- const inputSetWinHeight = (value: string) => {
- if (isNaN(Number(value))) {
- return;
- }
- setWinHeight(Number(value));
- };
-
- return (
-
-
-
-
- Current view size:width: {winWidth}, height:{winHeight}
-
-
- 开启循环： setLoopData(value)}>
-
-
- 图片宽度/高度：
-
- inputSetWinWidth(value)}
- defaultValue="300"
- keyboardType="numeric"
- />
- inputSetWinHeight(value)}
- defaultValue="200"
- keyboardType="numeric"
- />
-
-
- 开始位置：
- inputStartFrameIndex(value)}
- defaultValue="0"
- keyboardType="numeric"
- />
- 播放速度：
- inputFramesPerSecond(value)}
- defaultValue="24"
- keyboardType="numeric"
- />
-
- 采样宽度/高度：
-
- inputSampleWidth(value)} defaultValue='-1' keyboardType='default' />
- inputSampleHeight(value)} defaultValue='-1' keyboardType='default' />
-
-
-
- {!isShow ? (
-
-
- );
-};
-const styles = StyleSheet.create({
- continer: {
- flex: 1,
- justifyContent: "center",
- width: "100%",
- height: "100%",
- },
- title: {
- textAlign: "center",
- marginVertical: 8,
- },
- fixToText: {
- flexDirection: "row",
- justifyContent: "space-between",
- },
- separator: {
- marginVertical: 8,
- borderBottomColor: "#737373",
- borderBottomWidth: StyleSheet.hairlineWidth,
- },
- input: {
- height: 40,
- margin: 12,
- borderWidth: 1,
- borderColor: "red",
- padding: 10,
- width: 200,
- },
- box: {
- flexDirection: "row",
- justifyContent: "flex-start",
- },
- input1: {
- width: 100,
- },
-});
-
-export default ImageSequenceDemo;
-```
-
-TestDemo2.tsx
-
```js
import { StyleSheet, View } from "react-native";
import ImageSequence from 'react-native-image-sequence-2'
-
-const Separator = () =>
-const TestDemo2 = (props: any) => {
+const images = [
+ { uri: "https://octodex.github.com/images/stormtroopocat.jpg" },
+ { uri: 'https://octodex.github.com/images/saint_nictocat.jpg' },
+ require("./assets/2.jpg"),
+ require("./assets/3.jpg"),
+ require("./assets/4.jpg"),
+ require("./assets/5.jpg"),
+ require("./assets/6.jpg"),
+];
+const centerIndex = Math.floor(Math.random() * images.length);
+const TestDemo = () => {
return (
-
+
+
+
)
}
const styles = StyleSheet.create({
- separator: {
- marginVertical: 8,
- borderBottomColor: '#737373',
- borderBottomWidth: StyleSheet.hairlineWidth
- }
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
})
-export default TestDemo2
+export default TestDemo
```
## 2. 使用 Codegen
diff --git a/zh-cn/react-native-ssl-pinning.md b/zh-cn/react-native-ssl-pinning.md
index 148dfe25b54ba60c24e20a365ddce86796fa3efe..8323ddcebb35c79e28a9fc63e7c31ffb4851373d 100644
--- a/zh-cn/react-native-ssl-pinning.md
+++ b/zh-cn/react-native-ssl-pinning.md
@@ -65,7 +65,7 @@ import {
} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {getCookies, fetch, removeCookieByName} from 'react-native-ssl-pinning';
-import FileSelector from '@react-native-ohos/react-native-file-selector';
+import FileSelector from 'react-native-file-selector';
function SslPingDemo() : React.JSX.Element{
return (
<>