web-dev-qa-db-ja.com

Reactネイティブ<CheckBox>コンポーネントをスタイルする方法は？

React Native CheckBoxコンポーネントをスタイルすることは可能ですか？

ここにリストされているstyleプロパティはありません： https://facebook.github.io/react-native/docs/checkbox.html

無効なスタイルプロパティをその上に置いたところ、ポップアップしたRN警告メッセージがすべての有効なCSSプロパティを教えてくれましたが、いずれもスタイル設定に有益なことは何もしませんでした。

見た目はまともですが、ティールカラーからブランドカラーに変えたいです。

出来ますか？

これらのプロパティは機能していませんが、CheckBoxの有効なスタイルプロパティとしてリストされています。

{
  height: 50,             // changes the hitspace but not the checkbox itself
  width: 50,
  borderWidth: 1,         // does nothing
  backgroundColor: 'red', // makes the area around and inside the checkbox red
  borderColor: 'green',   // does nothing
  borderStyle: 'dotted'   // does nothing
}

誰もが自分のチェックボックスを作成するだけで存在する理由がわかりません。私がそれをしたなら、それが与えるすべてのものであるので、私は本当に何の用途もありません

value={this.state.rememberMe}
onValueChange={() => this.toggleRememberMe()}

フードの下で何か魔法がかからない限り。それはまともなonChangeアニメーションを持っていますが、私が自分で作成し、オン/オフイメージまたは<TouchableHighlight or Opacity>にラップされた<View>のようなものを使用すると、すぐに非推奨になります。

何百ものカスタムチェックボックスを除いて、Googleで情報を見つけることができません。それらの周りを検索するのは実際には本当に難しいです。

cssreactjscheckboxreact-native
10
agm1984

Reactネイティブ CheckBoxコンポーネント は、Androidのネイティブチェックボックスコンポーネントをレンダリングします。

スタイルを変更する最も簡単な方法は、Androidプロジェクトスタイルの構成を変更することです（その方法の追加手順 ここ ））。

これは、これだけでなく、最終的に表示される可能性のある他のネイティブコンポーネントの配色と一致させる簡単な方法です。

1
Gordon Carlson

簡単に言えば、それは不可能です。 React Nativeは、ネイティブAndroid Checkboxコンポーネントを使用し、 react -native-checkboxコミュニティプロジェクト 。この小道具は公式のReact Native docsに文書化されていません。

さらに、このコンポーネントのTypeScript定義は次のとおりです AndroidCheckBoxNativeComponent.js 。ネイティブコンポーネントにリレーされる小道具は、onChange、onValueChange、testID、on、enabledおよびtintColors。

1
VulfCompressor

はい。できます。reactネイティブ要素を使用することをお勧めします。このライブラリでは、2つのオプションcheckedColorとuncheckedColorがあります。checkedColorのデフォルトは緑ですが、次のように変更できます。必要なもの、たとえばcheckedColor={"#fff"}またはcheckedColor="#fff"それらを試してみてください、それは2つのオプション、幸運に適用されます！

1
Demetrio Gomez