ホームページ >ウェブフロントエンド >jsチュートリアル >React Native でフローティング ボタンを実装する方法

React Native でフローティング ボタンを実装する方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-02 11:02:102665ブラウズ

今回はReact Nativeでフローティングボタンを実装する方法を紹介します。 React Nativeでフローティングボタンを実装する際の注意点を紹介します。

React Native の一時停止 ボタン グループ パート: 反応ネイティブ アクション ボタン、純粋な JS コンポーネント、Android と IOS のデュアル プラットフォームをサポート、サブボタンの設定をサポート、カスタムの位置、スタイル、アイコンをサポートします。

レンダリング

インストール方法

npm i react-native-action-button --save
react-native link react-native-vector-icons

react-native-vector-iconsアイコンコンポーネントを使用しているためリンクが必要です。プロジェクトですでにreact-native-vector-iconsを使用している場合、この手順は必要ありません。

サンプルコード

<View style={styles.container}>
  <Text style={styles.welcome}>
   悬浮按钮组件示例
  </Text>
  <ActionButton buttonColor="rgba(231,76,60,1)" position=&#39;left&#39; verticalOrientation=&#39;up&#39;>
   <ActionButton.Item buttonColor=&#39;#9b59b6&#39; title="New Task" onPress={() => console.log("notes tapped!")}>
   <Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor=&#39;#3498db&#39; title="Notifications" onPress={() => {}}>
   <Icon name="ios-notifications-off" style={styles.actionButtonIcon} />
   </ActionButton.Item>
   <ActionButton.Item buttonColor=&#39;#1abc9c&#39; onPress={() => {}}>
   <Icon name="ios-done-all-outline" style={styles.actionButtonIcon} />
   </ActionButton.Item>
  </ActionButton>
  <ActionButton
   buttonColor="rgba(231,76,60,1)"
   onPress={() => { alert('你点了我!')}}
   renderIcon={() => (<View style={styles.actionButtonView}><Icon name="ios-create-outline" style={styles.actionButtonIcon} />
   <Text style={styles.actionButtonText}>新增</Text>
   </View>)}
  />
  </View>

メインパラメータの説明

ActionButton

  1. size: ボタンのサイズ、デフォルトは56です

  2. アクティブ: ボタンを表示するかどうか

  3. position : ボタンの位置、左中右の可能性があります

  4. offsetX: onLongPress: 長押しイベントのオフセット位置

  5. buttonText: ボタンのタイトル

  6. verticalOrientation: ポップの方向- 上ボタン、上または下

  7. renderIcon: ボタンの表示スタイルをカスタマイズできます。デフォルトはプラス記号です
  8. ActionButton.Item

  9. size: ボタンのサイズ、デフォルトは 56 です

  10. title: ボタンのタイトル

buttonColor: ボタンの色

    onPress: あなたはこの記事を読んだと思います
  1. よりエキサイティングな情報については、こちらをご覧ください。 php 中国語 Web サイトの他の関連記事にも注目してください。
  2. 推奨読書:

  3. Webpack モバイル端末用に rem を自動的に構築する手順の詳細な説明
  4. Angular コンポーネント タグにスタイル クラスを追加するための 5 つの手順の手順

以上がReact Native でフローティング ボタンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。