diff --git a/en/react-native-paper.md b/en/react-native-paper.md
index 3420acb946193c820d7695803801edbef865b581..4e4ee2831c8b7e0e2465f935918eec347bb29814 100644
--- a/en/react-native-paper.md
+++ b/en/react-native-paper.md
@@ -41,8 +41,10 @@ The following code shows the basic use scenario of the repository:
1.Wrap your root component in from . If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to . This will usually be in the file. If you have an Expo project, you can do this inside the exported component in the file.`PaperProvider``react-native-paper``AppRegistry.registerComponent``index.js``App.js`
```js
+import { AppRegistry } from 'react-native';
import { PaperProvider } from 'react-native-paper';
-import App from '../App';
+import App from './src/APP';
+import { name as appName } from './app.json';
export default function PaperExample() {
return (
@@ -53,9 +55,192 @@ export default function PaperExample() {
}
AppRegistry.registerComponent(appName, () => PaperExample);
```
-2.If you have another provider (such as ), wrap it outside so that the context is available to components rendered inside a from the library:`Redux``PaperProvider``Modal`
+2.App.json file (the following is the name of the test project)
```js
+{
+ "name": "app_name",
+ "displayName": "tester",
+}
+```
+
+3.Create a new Navigation.tsx file in the components directory
+```js
+import React, {useEffect} from 'react';
+import {
+ FlatList,
+ Image,
+ Platform,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from 'react-native';
+
+const NavigationContext = React.createContext<
+ | {
+ currentPageName: string;
+ navigateTo: (pageName: string) => void;
+ registerPageName: (pageName: string) => void;
+ registeredPageNames: string[];
+ }
+ | undefined
+>(undefined);
+
+const PALETTE = {
+ REACT_CYAN_LIGHT: 'hsl(193, 95%, 68%)',
+ REACT_CYAN_DARK: 'hsl(193, 95%, 30%)',
+};
+
+export function NavigationContainer({
+ initialPage = 'INDEX',
+ children,
+}: {
+ initialPage?: string;
+ children: any;
+}) {
+ const [currentPageName, setCurrentPageName] = React.useState(initialPage);
+ const [registeredPageNames, setRegisteredPageNames] = React.useState<
+ string[]
+ >([]);
+
+ return (
+ {
+ setRegisteredPageNames(pageNames => {
+ if (pageNames.includes(pageName)) {
+ return pageNames;
+ }
+ return [...pageNames, pageName];
+ });
+ },
+ registeredPageNames,
+ }}>
+
+ }>
+
+ {children}
+
+
+ );
+}
+
+export function useNavigation() {
+ return React.useContext(NavigationContext)!;
+}
+
+export function Page({name, children}: {name: string; children: any}) {
+ const {currentPageName, navigateTo, registerPageName} = useNavigation();
+
+ useEffect(() => {
+ if (name !== 'INDEX') {
+ registerPageName(name);
+ }
+ }, [name]);
+
+ return name === currentPageName ? (
+
+ {name !== 'INDEX' && (
+
+ {
+ navigateTo('INDEX');
+ }}>
+
+ {'‹ Back'}
+
+
+
+ )}
+ {children}
+
+ ) : null;
+}
+
+export function IndexPage() {
+ const {navigateTo, registeredPageNames} = useNavigation();
+
+ return (
+
+
+
+ RN Tester
+ {'rnohArchitecture' in Platform.constants
+ ? (` (${Platform.constants.rnohArchitecture})` as string)
+ : ''}
+
+
+ }
+ renderItem={({item}) => {
+ return (
+
+ {
+ navigateTo(item);
+ }}>
+ {item}
+
+
+ );
+ }}
+ ItemSeparatorComponent={() => (
+
+ )}
+ />
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ height: '100%',
+ backgroundColor: '#888',
+ },
+ buttonText: {
+ width: '100%',
+ fontWeight: 'bold',
+ paddingHorizontal: 16,
+ paddingVertical: 24,
+ color: 'white',
+ backgroundColor: 'black',
+ },
+});
+
+```
+
+4.After packaging PaperProvider, we need to pass the displayed components to Providers. In this section, we use the ActiveIndicator as an example to demonstrate. Create a new file named test.tsx in the src directory and put the following code into it.
+```js
+import * as React from 'react';
+import { View, StatusBar, SafeAreaView } from 'react-native';
+import { PortalProvider } from '@gorhom/portal';
+import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+import { NavigationContainer, Page } from './components';
+
export default function App() {
return (
@@ -65,29 +250,16 @@ export default function App() {
-
+
- ......
-
);
}
```
-3.Activity indicator is used to present progress of some activity in the app. It can be used as a drop-in for the ActivityIndicator shipped with React Native.
-```js
-import * as React from 'react';
-import { ActivityIndicator, MD2Colors } from 'react-native-paper';
-
-const ActivityIndicatorDemo = () => (
-
-);
-
-export default ActivityIndicatorDemo;
-```
## Link
The HarmonyOS implementation of this library depends on the native code from @react-native-oh-tpl/react-native-safe-area-context and @react-native-oh-tpl/react-native-vector-icons. If this library is included into your HarmonyOS application, there is no need to include it again; you can skip the steps in this section and use it directly.
diff --git a/en/react-native-snap-carousel.md b/en/react-native-snap-carousel.md
index 187b4f86fc8faff0d62b0d6e5c9252b3410bd6ec..7f49c4bb89ecefbd65867f86450a521410bf7c8a 100644
--- a/en/react-native-snap-carousel.md
+++ b/en/react-native-snap-carousel.md
@@ -185,7 +185,7 @@ Check the release version information in the release address of the third-party
## Known Issues
-- [ ] enableMomentum属性在ios设备上效果不明显，Harmony上效果使用正常: [issue#1](https://github.com/react-native-oh-library/react-native-snap-carousel/issues/4)
+- [ ] The **enableMomentum** property does not work effectively on iOS devices, but is normal on HarmonyOS devices: [issue#1](https://github.com/react-native-oh-library/react-native-snap-carousel/issues/4).
## Others
diff --git a/en/react-native-sound.md b/en/react-native-sound.md
index 2b59258fb95591d0ec745647c0eaeb63179a8b93..b3a42e926e340e3ae6c8b6dd160e8be2550ceb5e 100644
--- a/en/react-native-sound.md
+++ b/en/react-native-sound.md
@@ -344,7 +344,7 @@ Check the release version information in the release address of the third-party
## Known Issues
-- [ ] 方法getNumberOfChannels,setSystemVolume,getSystemVolume,setPan，getPan，setPitch，getPitch，setSpeakerphoneOn，setMode，enableInSilenceMode，enable，setCategory， setActive 在Harmony没有对应的api 问题: [issue#1](https://github.com/react-native-oh-library/react-native-sound/issues/21)
+- [ ] The **getNumberOfChannels**, **setSystemVolume**, **getSystemVolume**, **setPan**, **getPan**, **setPitch**, **getPitch**, **setSpeakerphoneOn**, **setMode**, **enableInSilenceMode**, **enable**, **setCategory**, and **setActive** methods do not have corresponding APIs on HarmonyOS: [issue#1](https://github.com/react-native-oh-library/react-native-sound/issues/21).
## Others
diff --git a/zh-cn/react-native-paper.md b/zh-cn/react-native-paper.md
index 47ffcd6b40242009556d7cbabc706644d4624009..a2fe0b5852cc17369321bde2873827f0d27fb087 100644
--- a/zh-cn/react-native-paper.md
+++ b/zh-cn/react-native-paper.md
@@ -40,8 +40,10 @@ paper使用需要安装react-native-safe-area-context来处理安全区域。另
1.将根组件包装在PaperProvider中。如果您有一个原始的 React Native 项目，最好将其添加到传递给 的组件中AppRegistry.registerComponent。这通常在index.js文件中
```js
+import { AppRegistry } from 'react-native';
import { PaperProvider } from 'react-native-paper';
-import App from '../App';
+import App from './src/APP';
+import { name as appName } from './app.json';
export default function PaperExample() {
return (
@@ -52,8 +54,192 @@ export default function PaperExample() {
}
AppRegistry.registerComponent(appName, () => PaperExample);
```
-2.包装PaperProvider之后，我们需要将展示的组件传递到 Providers 中。在这一部分，我们使用ActivityIndicator作为示例展示
+
+2.app.json文件（以下为测试项目名称）
+```js
+{
+ "name": "app_name",
+ "displayName": "tester",
+}
+```
+
+3.components目录下新建Navigation.tsx文件
```js
+import React, {useEffect} from 'react';
+import {
+ FlatList,
+ Image,
+ Platform,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from 'react-native';
+
+const NavigationContext = React.createContext<
+ | {
+ currentPageName: string;
+ navigateTo: (pageName: string) => void;
+ registerPageName: (pageName: string) => void;
+ registeredPageNames: string[];
+ }
+ | undefined
+>(undefined);
+
+const PALETTE = {
+ REACT_CYAN_LIGHT: 'hsl(193, 95%, 68%)',
+ REACT_CYAN_DARK: 'hsl(193, 95%, 30%)',
+};
+
+export function NavigationContainer({
+ initialPage = 'INDEX',
+ children,
+}: {
+ initialPage?: string;
+ children: any;
+}) {
+ const [currentPageName, setCurrentPageName] = React.useState(initialPage);
+ const [registeredPageNames, setRegisteredPageNames] = React.useState<
+ string[]
+ >([]);
+
+ return (
+ {
+ setRegisteredPageNames(pageNames => {
+ if (pageNames.includes(pageName)) {
+ return pageNames;
+ }
+ return [...pageNames, pageName];
+ });
+ },
+ registeredPageNames,
+ }}>
+
+ }>
+
+ {children}
+
+
+ );
+}
+
+export function useNavigation() {
+ return React.useContext(NavigationContext)!;
+}
+
+export function Page({name, children}: {name: string; children: any}) {
+ const {currentPageName, navigateTo, registerPageName} = useNavigation();
+
+ useEffect(() => {
+ if (name !== 'INDEX') {
+ registerPageName(name);
+ }
+ }, [name]);
+
+ return name === currentPageName ? (
+
+ {name !== 'INDEX' && (
+
+ {
+ navigateTo('INDEX');
+ }}>
+
+ {'‹ Back'}
+
+
+
+ )}
+ {children}
+
+ ) : null;
+}
+
+export function IndexPage() {
+ const {navigateTo, registeredPageNames} = useNavigation();
+
+ return (
+
+
+
+ RN Tester
+ {'rnohArchitecture' in Platform.constants
+ ? (` (${Platform.constants.rnohArchitecture})` as string)
+ : ''}
+
+
+ }
+ renderItem={({item}) => {
+ return (
+
+ {
+ navigateTo(item);
+ }}>
+ {item}
+
+
+ );
+ }}
+ ItemSeparatorComponent={() => (
+
+ )}
+ />
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ width: '100%',
+ height: '100%',
+ backgroundColor: '#888',
+ },
+ buttonText: {
+ width: '100%',
+ fontWeight: 'bold',
+ paddingHorizontal: 16,
+ paddingVertical: 24,
+ color: 'white',
+ backgroundColor: 'black',
+ },
+});
+
+```
+
+4.包装PaperProvider之后，我们需要将展示的组件传递到 Providers 中。在这一部分，我们使用ActivityIndicator作为示例展示。src目录下新建一个文件test.tsx,将下面代码放入。
+```js
+import * as React from 'react';
+import { View, StatusBar, SafeAreaView } from 'react-native';
+import { PortalProvider } from '@gorhom/portal';
+import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+import { NavigationContainer, Page } from './components';
+
export default function App() {
return (
@@ -63,28 +249,16 @@ export default function App() {
-
+
- ......
-
);
}
```
-3.活动指示器用于显示应用中某些活动的进度。它可以作为 React Native 附带的 ActivityIndicator 的插件使用。
-```js
-import * as React from 'react';
-import { ActivityIndicator, MD2Colors } from 'react-native-paper';
-
-const ActivityIndicatorDemo = () => (
-
-);
-export default ActivityIndicatorDemo;
-```
## Link
本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-safe-area-context和@react-native-oh-tpl/react-native-vector-icons的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。