{"id":3986,"url":"https://github.com/ide/react-native-button","last_synced_at":"2025-05-15T05:06:18.959Z","repository":{"id":29413665,"uuid":"32949191","full_name":"ide/react-native-button","owner":"ide","description":"A button for React apps","archived":false,"fork":false,"pushed_at":"2023-06-15T00:57:36.000Z","size":39,"stargazers_count":773,"open_issues_count":22,"forks_count":130,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-05-08T03:03:10.614Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ide.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2015-03-26T20:05:38.000Z","updated_at":"2025-04-12T03:56:29.000Z","dependencies_parsed_at":"2024-04-25T00:41:10.015Z","dependency_job_id":"90780033-17ab-422a-b3dd-20edf0a381dd","html_url":"https://github.com/ide/react-native-button","commit_stats":{"total_commits":65,"total_committers":26,"mean_commits":2.5,"dds":0.6,"last_synced_commit":"61804c5c557af43b198c60fbd7fac077e9e26071"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ide%2Freact-native-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ide%2Freact-native-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ide%2Freact-native-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ide%2Freact-native-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ide","download_url":"https://codeload.github.com/ide/react-native-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851072,"owners_count":21973674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-01-05T20:16:57.688Z","updated_at":"2025-05-15T05:06:13.950Z","avatar_url":"https://github.com/ide.png","language":"JavaScript","readme":"# react-native-button\nA button for React apps\n\n# Usage\n\nInstall the button from npm with `npm install react-native-button --save`. Then, require it from your app's JavaScript files with `import Button from 'react-native-button'`.\n\n```js\nimport React, { Component } from 'react';\nimport Button from 'react-native-button';\n\nexport default class ExampleComponent extends Component {\n  constructor(props, context) {\n    super(props, context);\n  }\n  _handlePress() {\n    console.log('Pressed!');\n  }\n  render() {\n    return (\n      \u003cButton\n        style={{fontSize: 20, color: 'green'}}\n        styleDisabled={{color: 'red'}}\n        onPress={() =\u003e this._handlePress()}\u003e\n        Press Me!\n      \u003c/Button\u003e\n    );\n  }\n};\n\n```\n\nThe React packager will include the Button component in your app's JS package and make it available for your app to use.\n\n## Disabled prop usage\n\nYou can control a button's state by setting `disabled` prop value in this way:\n\n```js\nimport React, { Component } from 'react';\nimport Button from 'react-native-button';\n\nexport default class ExampleComponent extends Component {\n  constructor(props, context) {\n    super(props, context);\n      this.state = {\n        isDisabled: false\n      }\n    }\n  _handlePress() {\n    this.setState({\n      isDisabled: true\n    });\n    console.log('Now, button disabled');\n  }\n  render() {\n    const { isDisabled } = this.state;\n    return (\n      \u003cButton\n        style={{ fontSize: 20, color: 'white' }}\n        styleDisabled={{ color: 'white' }}\n        disabled={isDisabled}\n        containerStyle={{ padding: 10, height: 45, overflow: 'hidden', borderRadius: 4, backgroundColor: 'aqua' }}\n        disabledContainerStyle={{ backgroundColor: 'pink' }}\n        onPress={() =\u003e this._handlePress()}\n      \u003e\n        Press Me!\n      \u003c/Button\u003e\n    );\n  }\n};\n\n```\n\n## Props\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eProp\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eaccessibilityLabel\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eString\u003c/td\u003e\n    \u003ctd\u003eVoiceOver will read this string when a user selects the associated element.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eallowFontScaling\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eBool\u003c/td\u003e\n    \u003ctd\u003eSpecifies whether fonts should scale to respect Text Size accessibility settings. \u003c/td\u003e\n  \u003c/tr\u003e\n  \n  \u003ctr\u003e\n    \u003ctd\u003eDisabled\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eBool\u003c/td\u003e\n    \u003ctd\u003eDisables the button\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eStyle\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eView Style Prop\u003c/td\u003e\n    \u003ctd\u003eThe style for the button\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003estyleDisabled\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eView Style Prop\u003c/td\u003e\n    \u003ctd\u003eThe style for the disabled button\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003econtainerStyle\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eView Style Prop\u003c/td\u003e\n    \u003ctd\u003eThe style for the container\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edisabledContainerStyle\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eView Style Prop\u003c/td\u003e\n    \u003ctd\u003eThe style for the container when the button is disabled\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003echildGroupStyle\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eView Style Prop\u003c/td\u003e\n    \u003ctd\u003eThe style for the child views\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eandroidBackground\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eBackground Prop Type\u003c/td\u003e\n    \u003ctd\u003eThe background for andriod devices.\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eonPress\u003c/td\u003e\n    \u003ctd\u003eNo\u003c/td\u003e\n    \u003ctd\u003eFunction\u003c/td\u003e\n    \u003ctd\u003eHandler to be called when the user taps the button. \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## Container Style\n\nYou can make a button with rounded corners like this:\n\n```js\n  \u003cButton\n    containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: 'white'}}\n    disabledContainerStyle={{backgroundColor: 'grey'}}\n    style={{fontSize: 20, color: 'green'}}\u003e\n    Press me!\n  \u003c/Button\u003e\n```\n\n# Contributing\n\nContributions are welcome. Please verify that styling matches the latest version of iOS when you are changing the visual look of the buttons.\n","funding_links":[],"categories":["Components","组件","JavaScript","Libraries","Others"],"sub_categories":["UI","Button","图形动画"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fide%2Freact-native-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fide%2Freact-native-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fide%2Freact-native-button/lists"}