Skip to content

Commit 4c53d93

Browse files
吴健林志鹏
吴健
authored and
林志鹏
committed
!770 docs: [#IA5NU0] 新增react-native-cardview指导文档
* docs: [#IA5NU0] 新增react-native-cardview指导文档
1 parent de61246 commit 4c53d93

File tree

1 file changed

+265
-0
lines changed

1 file changed

+265
-0
lines changed

‎zh-cn/react-native-cardview.md

+265
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<!-- {% raw %} -->
2+
> 模板版本：v0.2.2
3+
4+
<p align="center">
5+
<h1 align="center"> <code>react-native-cardview</code> </h1>
6+
</p>
7+
<p align="center">
8+
<a href="https://github.com/Kishanjvaghela/react-native-cardview">
9+
<img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
10+
</a>
11+
<a href="https://github.com/Kishanjvaghela/react-native-cardview">
12+
<img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
13+
</a>
14+
</p>
15+
16+
> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-cardview)
17+
18+
## 安装与使用
19+
20+
请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-cardview Releases](https://github.com/react-native-oh-library/react-native-cardview/releases)，并下载适用版本的 tgz 包。
21+
22+
进入到工程目录并输入以下命令：
23+
24+
> [!TIP] # 处替换为 tgz 包的路径
25+
26+
#### **npm**
27+
28+
```bash
29+
npm install @react-native-oh-tpl/react-native-cardview@file:#
30+
```
31+
32+
#### **yarn**
33+
34+
```bash
35+
yarn add @react-native-oh-tpl/react-native-cardview@file:#
36+
```
37+
38+
<!-- tabs:end -->
39+
40+
下面的代码展示了这个库的基本使用场景：
41+
42+
> [!WARNING] 使用时 import 的库名不变。
43+
44+
```js
45+
import React, { Component } from 'react';
46+
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
47+
import CardView from 'react-native-cardview';
48+
49+
export default class Example3 extends Component {
50+
render() {
51+
return (
52+
<CardView
53+
cardElevation={3}
54+
cardMaxElevation={3}
55+
cornerRadius={3}
56+
style={{
57+
height: 60,
58+
justifyContent: 'center',
59+
alignItems: 'center',
60+
margin: 20,
61+
backgroundColor: '#ffffff'
62+
}}
63+
>
64+
<View
65+
style={{
66+
flex: 1,
67+
justifyContent: 'flex-end',
68+
backgroundColor: 'red'
69+
}}
70+
>
71+
<Text
72+
style={{
73+
color: '#000000',
74+
fontSize: 12,
75+
backgroundColor: 'pink',
76+
textAlign: 'center'
77+
}}
78+
>
79+
Helloo
80+
</Text>
81+
</View>
82+
</CardView>
83+
);
84+
}
85+
}
86+
87+
const styles = StyleSheet.create({
88+
container: {
89+
flex: 1
90+
},
91+
card: {
92+
backgroundColor: 'white',
93+
alignItems: 'center',
94+
justifyContent: 'center',
95+
alignSelf: 'center',
96+
flex: 1,
97+
margin: 10
98+
},
99+
text: {
100+
textAlign: 'center',
101+
margin: 10,
102+
height: 75
103+
},
104+
instructions: {
105+
textAlign: 'center',
106+
color: '#333333',
107+
marginBottom: 5
108+
}
109+
});
110+
111+
```
112+
113+
## Link
114+
115+
目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。
116+
117+
首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony`
118+
119+
### 在工程根目录的 `oh-package.json` 添加 overrides 字段
120+
121+
```json
122+
{
123+
...
124+
"overrides": {
125+
"@rnoh/react-native-openharmony" : "./react_native_openharmony"
126+
}
127+
}
128+
```
129+
130+
### 引入原生端代码
131+
132+
目前有两种方法：
133+
134+
1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）；
135+
2. 直接链接源码。
136+
137+
方法一：通过 har 包引入（推荐）
138+
139+
> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。
140+
141+
打开 `entry/oh-package.json5`，添加以下依赖
142+
143+
```json
144+
"dependencies": {
145+
"@rnoh/react-native-openharmony": "file:../react_native_openharmony",
146+
"@react-native-oh-tpl/react-native-cardview": "file:../../node_modules/@react-native-oh-tpl/react-native-cardview/harmony/card_view.har"
147+
}
148+
```
149+
150+
点击右上角的 `sync` 按钮
151+
152+
或者在终端执行：
153+
154+
```bash
155+
cd entry
156+
ohpm install
157+
```
158+
159+
方法二：直接链接源码
160+
161+
> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md)
162+
163+
### 配置 CMakeLists 和引入 CardViewPackage
164+
165+
打开 `entry/src/main/cpp/CMakeLists.txt`，添加：
166+
167+
```diff
168+
project(rnapp)
169+
cmake_minimum_required(VERSION 3.4.1)
170+
set(CMAKE_SKIP_BUILD_RPATH TRUE)
171+
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
172+
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
173+
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
174+
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
175+
set(LOG_VERBOSITY_LEVEL 1)
176+
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
177+
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
178+
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
179+
add_compile_definitions(WITH_HITRACE_SYSTRACE)
180+
181+
add_subdirectory("${RNOH_CPP_DIR}" ./rn)
182+
183+
# RNOH_BEGIN: manual_package_linking_1
184+
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
185+
+ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-cardview/src/main/cpp" ./card-view)
186+
# RNOH_END: manual_package_linking_1
187+
188+
file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")
189+
190+
add_library(rnoh_app SHARED
191+
${GENERATED_CPP_FILES}
192+
"./PackageProvider.cpp"
193+
"${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
194+
)
195+
target_link_libraries(rnoh_app PUBLIC rnoh)
196+
197+
# RNOH_BEGIN: manual_package_linking_2
198+
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
199+
+ target_link_libraries(rnoh_app PUBLIC rnoh_card_view)
200+
# RNOH_END: manual_package_linking_2
201+
```
202+
203+
打开 `entry/src/main/cpp/PackageProvider.cpp`，添加：
204+
205+
```diff
206+
#include "RNOH/PackageProvider.h"
207+
#include "generated/RNOHGeneratedPackage.h"
208+
#include "SamplePackage.h"
209+
+ #include "CardViewPackage.h"
210+
211+
using namespace rnoh;
212+
213+
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
214+
return {
215+
std::make_shared<RNOHGeneratedPackage>(ctx),
216+
std::make_shared<SamplePackage>(ctx),
217+
+ std::make_shared<CardViewPackage>(ctx),
218+
};
219+
}
220+
```
221+
222+
### 运行
223+
224+
点击右上角的 `sync` 按钮
225+
226+
或者在终端执行：
227+
228+
```bash
229+
cd entry
230+
ohpm install
231+
```
232+
233+
然后编译、运行即可。
234+
235+
## 约束与限制
236+
237+
### 兼容性
238+
239+
要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
240+
241+
请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[react-native-oh-tpl/react-native-cardview Releases](https://github.com/react-native-oh-library/react-native-cardview/releases)
242+
243+
## 属性
244+
245+
> [!tip] "Platform"列表示该属性在原三方库上支持的平台。
246+
247+
> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
248+
249+
| Name | Description | Type | Required | Platform | HarmonyOS Support |
250+
| ---- | ----------- | ---- | -------- | -------- | ------------------ |
251+
| cornerRadius | An attribute to set the elevation of the card. | number | No | All | yes |
252+
| cardElevation | An attribute to support shadow on pre-lollipop device in android. | number | No | All | yes |
253+
| cardMaxElevation | An attribute to set the radius of the card. | number | No | All | yes |
254+
| useCompatPadding | CardView adds additional padding to draw shadows on platforms before Lollipop. | boolean | No | All | yes |
255+
| cornerOverlap | On pre-Lollipop platforms, CardView does not clip the bounds of the Card for the rounded corners. | boolean | No | All | yes |
256+
| backgroundColor | The background color of the card. | number | No | All | yes |
257+
258+
## 遗留问题
259+
260+
## 其他
261+
262+
## 开源协议
263+
264+
本项目基于 [The MIT License](https://github.com/Kishanjvaghela/react-native-cardview/blob/master/LICENSE)，请自由地享受和参与开源。
265+
<!-- {% endraw %} -->

0 commit comments

Comments
 (0)