React Native を使用してフローティングボタンコンポーネントを作成する方法-jsチュートリアル-php.cn

React Native を使用してフローティングボタンコンポーネントを作成する方法

php中世界最好的语言

リリース： 2018-05-26 16:35:57

オリジナル

2113 人が閲覧しました

今回は、React Native を使用してフローティングボタンコンポーネントを作成する方法と、React Native を使用してフローティングボタンコンポーネントを作成する際の

注意事項を紹介します。実際の事例を見てみましょう。

React Native フローティングボタンコンポーネント: React-native-action-button、純粋な 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