diff --git a/README.md b/README.md index 99c9ba603bcdfa434e34bbedf4782f1a7e03cf3e..1ff69ff610e9889cdc69bb752196457feaefb64f 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,9 @@ | 105 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core) | 0.5.0 | 是 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core/releases) | [链接](/zh-cn/react-native-worklets-core.md) | | 106 | [react-use](https://github.com/zenghongtu/react-use) | 17.2.4 | - | [react-use](https://github.com/zenghongtu/react-use/releases) | [链接](/zh-cn/react-use.md) | | 107 | [redux-toolkit](https://github.com/reduxjs/redux-toolkit) | 2.2.3 | - | [redux-toolkit](https://github.com/reduxjs/redux-toolkit/releases) | [链接](/zh-cn/redux-toolkit.md) | +| 108 | [react-native-switch-pro](https://github.com/poberwong/react-native-switch-pro) | 1.0.5 | - | [react-native-switch-pro](https://github.com/react-native-oh-library/react-native-switch-pro) | [链接](/zh-cn/react-native-switch-pro.md) | +| 109 | [react-native-flexi-radio-button](https://github.com/thegamenicorus/react-native-flexi-radio-button) | 0.2.1 | 是 | [react-native-flexi-radio-button](https://github.com/thegamenicorus/react-native-flexi-radio-button) | [链接](/zh-cn/react-native-flexi-radio-button.md) | +| 110 | [react-native-drop-shadow](https://github.com/hoanglam10499/react-native-drop-shadow) | 1.0.0 | 是 | [react-native-drop-shadow](https://github.com/hoanglam10499/react-native-drop-shadow) | [链接](/zh-cn/react-native-drop-shadow.md) | ## 社区 diff --git a/zh-cn/README.md b/zh-cn/README.md index f99033f9fb60e025777fd57e833657ed52074f91..6cb25aca8ad8ab7798c7658e7008086d742c0b83 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -127,6 +127,9 @@ | 105 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core) | 0.5.0 | 是 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core/releases) | [链接](/zh-cn/react-native-worklets-core.md) | | 106 | [react-use](https://github.com/zenghongtu/react-use) | 17.2.4 | - | [react-use](https://github.com/zenghongtu/react-use/releases) | [链接](/zh-cn/react-use.md) | | 107 | [redux-toolkit](https://github.com/reduxjs/redux-toolkit) | 2.2.3 | - | [redux-toolkit](https://github.com/reduxjs/redux-toolkit/releases) | [链接](/zh-cn/redux-toolkit.md) | +| 108 | [react-native-switch-pro](https://github.com/poberwong/react-native-switch-pro) | 1.0.5 | - | [react-native-switch-pro](https://github.com/react-native-oh-library/react-native-switch-pro) | [链接](/zh-cn/react-native-switch-pro.md) | +| 109 | [react-native-flexi-radio-button](https://github.com/thegamenicorus/react-native-flexi-radio-button) | 0.2.1 | 是 | [react-native-flexi-radio-button](https://github.com/thegamenicorus/react-native-flexi-radio-button) | [链接](/zh-cn/react-native-flexi-radio-button.md) | +| 110 | [react-native-drop-shadow](https://github.com/hoanglam10499/react-native-drop-shadow) | 1.0.0 | 是 | [react-native-drop-shadow](https://github.com/hoanglam10499/react-native-drop-shadow) | [链接](/zh-cn/react-native-drop-shadow.md) | ## 社区 diff --git a/zh-cn/react-native-drop-shadow.md b/zh-cn/react-native-drop-shadow.md new file mode 100644 index 0000000000000000000000000000000000000000..c859b44cb3db905720a4dc886ba9b02b230510de --- /dev/null +++ b/zh-cn/react-native-drop-shadow.md @@ -0,0 +1,121 @@ +> 模板版本:v0.1.3 + +

+

react-native-drop-shadow

+

+

+ + Supported platforms + + + License + +

+ +问题是阴影不适用于 Android 中的 React Native。此视图采用其子项,创建位图表示形式,对其进行模糊处理并着色以样式化阴影值,就像在 iOS 中一样 + +## 安装与使用 +进入到工程目录并输入以下命令: + +#### **yarn** + +```bash +yarn add react-native-drop-shadow +``` +如果使用了 `minSdkVersion = 16`: +```bash +yarn add react-native-drop-shadow@0.0.4 +``` + +### 局限性 +- Android 的位图限制为 2048x2048,但这可能取决于 API 版本。 +- 使用位图渲染来模拟阴影,如果同时渲染多个阴影和动画,则阴影可能会影响性能。 + +### 用法 + +```js +import DropShadow from "react-native-drop-shadow"; +``` + +```js +export default function usage() { + return ( + + ... + + ); +} +``` + +### 与 FlatList 一起使用 + +```js +export default function withFlatList() { + return ( + "List-" + index} + CellRendererComponent={DropShadow} // <==== add line + renderItem={({ item, index }) => ( + + ... + + )} + /> + ); +} +``` + +### 与动画视图一起使用 +要使它代替 ,您需要用来创建 的可动画版本。例如:Animated.ViewAnimated.createAnimatedComponentDropShadow。 + +```js +const AnimatedDropShadow = Animated.createAnimatedComponent(DropShadow); + +export default function withAnimatedViews() { + return ( + + ... + + ); +} +``` +然后,您可以使用`AnimatedDropShadow`来代替`Animated.View` 。 + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/hoanglam10499/react-native-drop-shadow/blob/master/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-flexi-radio-button.md b/zh-cn/react-native-flexi-radio-button.md new file mode 100644 index 0000000000000000000000000000000000000000..613e7f622ba62e35f187e47ee64ec9c8dcc6b6e9 --- /dev/null +++ b/zh-cn/react-native-flexi-radio-button.md @@ -0,0 +1,148 @@ +> 模板版本:v0.1.3 + +

+

react-native-flexi-radio-button

+

+

+ + Supported platforms + + + License + +

+ +简单灵活的 React Native App 单选按钮 + +## 安装 +``` +npm i react-native-flexi-radio-button --save +``` + +## 使用 + +### Basic Example +[see full basic example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/BasicExample/app.js) + +|![basic_example_ios](https://cloud.githubusercontent.com/assets/21040043/18545904/67b5476e-7b65-11e6-8fc4-8160b39a4ab0.gif)|![basic_example_android](https://cloud.githubusercontent.com/assets/21040043/18545908/69b22f5a-7b65-11e6-87d7-c82c0d3057dd.gif)| +|---------------|----------| +```jsx + +import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button' + +onSelect(index, value){ + this.setState({ + text: `Selected index: ${index} , value: ${value}` + }) +} + +render(){ + return( + + + this.onSelect(index, value)} + > + + This is item #1 + + + + This is item #2 + + + + This is item #3 + + + + {this.state.text} + + + ) +} +``` +### Custom Example +[see full custom example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/CustomExample/app.js) + +|![custom_ios](https://cloud.githubusercontent.com/assets/21040043/18546467/53bf8230-7b68-11e6-98f6-98899cce82b3.gif)|![cusom_android](https://cloud.githubusercontent.com/assets/21040043/18546744/cb912fce-7b69-11e6-9331-49e2337dcb04.gif)| +|---------------|----------| + + +modify in render() + +```jsx + this.onSelect(index, value)} +> + + + + + + Start from item index #1 + + + + Red Dot + + Green Dot + + + + Blue Dot + + +``` + +### 配置 +##### Radio Group: +| Property | Type | Default | Description | +|---------------|----------|-------------|----------------------------------------------------------------| +| size | number | 20 | 单选按钮的大小 | +| thickness | number | 1 | 单选按钮边框的宽度 | +| color | string | '#007AFF' | 单选按钮的颜色 | +| activeColor | string | null | 选择时单选按钮的颜色 | +| highlightColor | string | null | 选择后单选按钮的背景 | +| selectedIndex | number | null | 单选组的默认选择索引,可以更改为新值或空值以进行明确选择 | +| style | object | null | 如果提供,则要应用的自定义样式 | +| onSelect | function(index, value) | null | 选择单选按钮时要调用的函数 | + +##### Radio Button: + +| Property | Type | Default | Description | +|-----------|--------|---------|--------------------------------------------| +| value | any | null | value 将在回调时作为第二个参数传递onSelect | +| style | object | null | 要应用于“RadioButton”组件的样式 | +| color | string | same as 'RadioGroup' component | 按钮颜色 | +| disabled | bool | false | 如果为 true,则禁用此组件的所有交互 | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file diff --git a/zh-cn/react-native-switch-pro.md b/zh-cn/react-native-switch-pro.md new file mode 100644 index 0000000000000000000000000000000000000000..48aa6f96825078347ebc10d048f07f52f9f48713 --- /dev/null +++ b/zh-cn/react-native-switch-pro.md @@ -0,0 +1,131 @@ +> 模板版本:v0.1.3 + +

+

react-native-switch-pro

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-switch-pro) +作为 android 和 iOS 的通用开关,它可能是 Github 上 react-native 的最佳开关。 + +## 预览 + +    + + +## 特性 +* 几乎完美地打开了 react-native +* 在 iOS 和 Android 上都有良好的性能 +* 添加手势PanResponder +* 更多动画遵循 iOS 原生性能 +* 支持异步和同步事件 +* 支持双向数据绑定 +* 清晰的代码样式 + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[react-native-switch-pro Releases](https://github.com/react-native-oh-library/react-native-switch-pro/releases),并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令: + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install react-native-switch-pro@file:# +``` + +#### **yarn** + +```bash +yarn add react-native-switch-pro@file:# +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +## 使用 +* 同步 + +```JavaScript +import Switch from 'react-native-switch-pro' +... + render() { + return ( + + {...}}/> + + ) + } +... +``` + +* 异步 + +```JavaScript +... + render() { + return ( + + { + You can call your async module and just invoke callback(true) when succeed, + callback(false) when fail. + }}/> + + ) + } +... +``` + +## 属性 + Name | Description | Default | Type +------|-------------|----------|----------- +width | width of switch | 40 | number +height | height of switch | 21 | number +value | state of switch which can be used to bidirectional binding | undefined | bool +disabled | whether switch is clickable | false | bool +circleColorActive | color for circle handler of switch when it is on | white | string +circleColorInactive | color for circle handler of switch when it is off | white | string +style | styles that will be applied for switch container | undefined | style +circleStyle | styles that will be applied for the circle | undefined | style +backgroundActive | color of switch when it is on | green | string +backgroundInactive | color of switch when it is off | '#ddd' | string +onSyncPress | callback when switch is clicked | () => null | func +onAsyncPress | has a callback with result of async | (value, callback) => {callback(true)} | func + +## Notice +* 你最好不要一起使用 和 否则,只会被调用。onSyncPressonAsyncPressonSyncPress + +* value与双向绑定一起使用,可以是 redux、state 等。 +在 中,您应该写如下(带有状态):onAsyncPress + + ```javascript + { + callback(false or true, value => this.setState({value})) + }} + /> + ``` + `value => this.setState({value})仅当 result 为 true 时才会调用。 + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/poberwong/react-native-switch-pro/blob/master/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file