{"id":19495417,"url":"https://github.com/nu-system/react-native-button","last_synced_at":"2026-06-18T07:32:24.638Z","repository":{"id":38434404,"uuid":"194494335","full_name":"nu-system/react-native-button","owner":"nu-system","description":"NU 「 no-ui 」 组件库系统 nu-system，按钮组件 React native 实现","archived":false,"fork":false,"pushed_at":"2023-01-04T02:01:55.000Z","size":2839,"stargazers_count":1,"open_issues_count":35,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-08T13:22:16.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nu-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-30T08:44:26.000Z","updated_at":"2021-08-10T09:33:12.000Z","dependencies_parsed_at":"2023-02-01T17:46:36.599Z","dependency_job_id":null,"html_url":"https://github.com/nu-system/react-native-button","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nu-system/react-native-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-system%2Freact-native-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-system%2Freact-native-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-system%2Freact-native-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-system%2Freact-native-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nu-system","download_url":"https://codeload.github.com/nu-system/react-native-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nu-system%2Freact-native-button/sbom","scorecard":{"id":697931,"data":{"date":"2025-08-11","repo":{"name":"github.com/nu-system/react-native-button","commit":"79e7b54bfccc3bb888d6740c54c20a0dfe2946a2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/18 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"87 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv","Warn: Project is vulnerable to: GHSA-2j79-8pqc-r7x6","Warn: Project is vulnerable to: GHSA-36j3-xxf7-4pqg","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-v8v8-6859-qxm4","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T04:15:23.289Z","repository_id":38434404,"created_at":"2025-08-22T04:15:23.289Z","updated_at":"2025-08-22T04:15:23.289Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34481313,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T21:37:42.115Z","updated_at":"2026-06-18T07:32:24.618Z","avatar_url":"https://github.com/nu-system.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# nu-react-native-button\n\n[![npm package](https://img.shields.io/npm/v/@_nu/react-native-button.svg)](https://www.npmjs.org/package/@_nu/react-native-button)\n[![github](https://img.shields.io/github/stars/nu-system/react-native-button.svg?style=social)](https://github.com/nu-system/react-native-button)\n\n这是 NU 「 no-ui 」 组件库系统 nu-system，按钮组件 React native 实现。\n\n![示意图](./assets/demo.png)\n\n## 怎么用？\n\n```bash\nnpm i @_nu/react-native-button\n```\n\n## 二次封装\n\n选择 `NuButton` 意味着你选择的是一整套按钮解决方案。\n\n因为不同的项目有不同的皮肤，在实际项目中使用需要二次封装。\n\n这里默认采用的是 bootstrap 皮肤。\n\n```JSX\nimport React from 'react';\nimport NuButton, {createNuButtonTheme} from '@_nu/react-native-button';\n\n/**\n * 创建默认按钮主题\n */\ncreateNuButtonTheme({\n  levelColors: {\n      default: '#343a40',\n      secondary: '#6c757d',\n      primary: '#007bff',\n      warning: '#ffc107',\n      danger: '#dc3545',\n      success: '#22A745',\n  }\n});\n\n/**\n * 创建 test 按钮主题\n */\ncreateNuButtonTheme({\n    name:'test',\n    levelColors: {\n        default: '#000000',\n        primary: '#1976d2',\n        secondary: 'rgb(220, 0, 78)',\n        warning: '#ff9900',\n        danger: 'red',\n        success: 'green',\n    }\n});\n\nexport default NuButton;\n```\n\n## 使用\n\n```JSX\nimport Button from \"./components/Button\";\n\nconst Page=()=\u003e{    \n    return (\n     \u003cdiv\u003e\n        \u003cButton variant=\"ghost\" size=\"large\"\u003e一个大的幽灵按钮\u003c/Button\u003e                \n        \u003cButton theme=\"test\" variant=\"ghost\" size=\"large\"\u003e一个大的幽灵主按钮\u003c/Button\u003e\n     \u003c/div\u003e     \n    );\n};\n```\n\n## Api\n\n### NuButton\n\n| props   | 类型 | 默认值 | 功能 |\n|:-----|:-----:|:-----:|:-----:|\n| theme |  'string' | 'default' | 按钮主题 |\n| disabled |  boolean | - | 不可用按钮 |\n| loading |  boolean | - | loading按钮 |\n| capsule |  boolean | - | 圆角按钮|\n| circle |  boolean | - | 正圆按钮 |\n| level | 'default', 'primary', 'secondary', 'warning', 'danger', 'success' | `default` | 按钮等级 |\n| variant | 'fill', 'ghost', 'link' | `fill` | 按钮变体 |\n| size | \\['large', 'default', 'middle', 'small' \\] or `number` | `default` | 按钮大小 |\n| before | 'element','function' | `null` | 放到文字之前 |\n| after | 'element','function' | `null` | 放到文字之后 |\n\n*注*: 虽然提供了 `size` 可以为 `number` 的接口，但是这个是非常不推荐使用的。你使用这种方式，意味着你定义的这个按钮样式是没法被人复用的。\n\n### createNuButtonTheme \n\n| 参数   | 类型 | 默认值 | 功能 |\n|:-----|:-----:|:-----:|:-----:|\n| `name` |  `string` | `default` | 主题名称 |\n| `defaultProps` |  `Object`| 见下面 | 默认属性 |\n| `levelColors` |  `object` | 见下面 | 按钮主色列表 |\n| `Wrap` |  `func node` | 见下面 | 按钮容器对象 |\n| `WrapAndroid` |  `func node` | 见下面 | 安卓按钮容器对象 |\n| `Content` |  `func node` | 见下面 | 内容器 |\n| `Txt` |  `func node` | 见下面 | 文本容器 |\n| `Loader` |  `func node` | 见下面 | 加载对象 |\n| `wrapStyle` |  `object` | 见下面 | 主容器样式 |\n| `contentStyle` |  `object` | 见下面 | 内容器样式 |\n| `textStyle` |  `object` | 见下面 | 文本容器样式 |\n\n### `defaultProps`\n\n```JSX\ndefaultProps: {\n    level: 'default',\n    variant: 'fill'\n}\n```\n\n这是默认会添加到按钮上的属性值。\n\n### `Wrap, Content, Txt, Loader`\n\n这四个对象拥有相同的API和使用方法，必须返回一个 `node` 对象。\n\n```JSX\n{\n    WrapAndroid: function ({children, level, variant, ...otherProps}) {\n        return \u003cTouchableNativeFeedback\n            background={TouchableNativeFeedback.SelectableBackground()} {...otherProps}\u003e{children}\u003c/TouchableNativeFeedback\u003e;\n    },\n    Wrap: function ({children, level, variant, ...otherProps}) {\n        return \u003cTouchableOpacity activeOpacity={0.5} {...otherProps}\u003e{children}\u003c/TouchableOpacity\u003e;\n    },\n    Txt: Text,\n    Content: View,\n    Loader: function ({level, variant, wrapStyle, contentStyle, textStyle}) {\n        return (\u003cActivityIndicator animating={true} color={textStyle.color}/\u003e);\n    }\n}\n```\n\n- level: 当下按钮的等级\n- variant: 当下按钮的变体\n- wrapStyle: 计算之后的主容器样式\n- contentStyle: 计算之后的内容器样式\n- textStyle:  计算之后的文本样式\n\n#### 组件结构\n\n```JSX\n\u003cWrap\u003e\n    \u003cContent\u003e\n        \u003cTxt\u003eButton\u003c/Txt\u003e\n    \u003c/Content\u003e\n\u003c/Wrap\u003e\n```\n\n当 loading 的时候\n\n```JSX\n\u003cWrap\u003e\n    \u003cContent\u003e\n        \u003cLoader /\u003e\n    \u003c/Content\u003e\n\u003c/Wrap\u003e\n```\n\n### Api `wrapStyle` ,`contentStyle`, `textStyle`\n\n这三个对象拥有相同的API和使用方法。\n\n```JSX\n{\n    wrapStyle: {\n        default: {\n            position: 'relative',\n            overflow: 'hidden',\n            height: 40,\n        },\n        capsule: {\n            borderRadius: 100\n        },\n        circle: {\n            borderRadius: 100\n        },\n        large: {\n            height: 48\n        },\n        middle: {\n            height: 32\n        },\n        small: {\n            height: 24\n        },\n        ghost: {\n            borderWidth: 1\n        },\n        disabled: {\n            opacity: 0.4\n        }\n    },\n    textStyle: {\n        default: {\n            color: \"#ffffff\",\n            fontSize: 16,\n            textAlign: 'center',\n            marginLeft: 8,\n            marginRight: 8\n        },\n        large: {\n            fontSize: 18\n        },\n        middle: {\n            fontSize: 14\n        },\n        small: {\n            fontSize: 12\n        },\n        customStyle: function ({warning, fill, style}) {\n            if (warning \u0026\u0026 fill) {\n                style.color = '#333333';\n            }\n            return style;\n        }\n    },\n    contentStyle: {\n        default: {\n            width: '100%',\n            height: '100%',\n            alignItems: 'center',\n            justifyContent: 'center',\n            flexDirection: 'row'\n        }\n    }\n}\n```\n\n除了 `default` 之外的所有 bool 属性，都会在实际渲染的时候和 `default` 样式合并然后经过 `customStyle` 再渲染。\n\n\n#### customStyle\n\n必须要返回 style 对象。\n\n- level: 当下按钮的等级\n- variant: 当下按钮的变体\n- style: 当下计算好的样式\n\n\n你甚至可以自定义任何 bool 属性。\n\n```JSX\n{\n    wrapStyle:{\n        h100:{\n            height: 100\n        }\n    }\n}\n```\n\n```JSX\n\u003cButton h100\u003e高100的按钮\u003c/Button\u003e\n```\n\n### `levelColors`\n\n```JS\nconst levelColors= {\n    default: '#343a40',\n    primary: '#007bff',\n    secondary: '#6c757d',\n    warning: '#ffc107',\n    danger: '#dc3545',\n    success: '#22A745',\n};\n```\n\n## FAQ\n\n### 添加图标\n\n```JSX\n\u003cButton before={\u003cActivityIndicator animating={true} color={'red'}/\u003e}\u003e图标在我左边\u003c/Button\u003e\n\u003cButton after={\u003cActivityIndicator animating={true} color={'red'}/\u003e}\u003e图标在我右边\u003c/Button\u003e\n```\n\n### 多行文本\n\n```JSX\n\u003cButton\u003e{({textStyle}) =\u003e {\n    return (\n        \u003cView\u003e\n            \u003cText style={textStyle}\u003e切换主题\u003c/Text\u003e\n            \u003cText style={textStyle}\u003e「default\u003c/Text\u003e\n        \u003c/View\u003e\n    );\n}}\u003c/Button\u003e\n```\n\n\n### 渐变背景\n\n```JSX\n{    \n    name:'test',\n    Content: function ({children, style, level, variant}) {\n        /* 修改 fill danger 按钮为渐变背景  */\n        if (level === 'danger' \u0026\u0026 variant === 'fill') {\n            return (\n                \u003cLinearGradient\n                    colors={[\"red\", \"blue\"]}\n                    style={style}\n                \u003e{children}\u003c/LinearGradient\u003e\n            );\n        } else {\n            return (\n                \u003cView style={style}\u003e{children}\u003c/View\u003e\n            );\n        }\n    },\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnu-system%2Freact-native-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnu-system%2Freact-native-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnu-system%2Freact-native-button/lists"}