React Native에서 플로팅 버튼을 구현하는 방법-JS 튜토리얼-php.cn

React Native에서 플로팅 버튼을 구현하는 방법

php中世界最好的语言

풀어 주다： 2018-05-02 11:02:10

원래의

2700명이 탐색했습니다.

이번에는 React Native에서 플로팅 버튼을 구현하는 방법을 보여드리겠습니다. React Native에서 플로팅 버튼을 구현할 때의 주의사항은 무엇인가요?

React Native 중단버튼 그룹부분: React-Native-Action-Button, 순수 JS 구성 요소, Android 및 IOS 듀얼 플랫폼 지원, 하위 버튼 설정 지원, 사용자 정의 위치, 스타일 및 아이콘 지원.

Rendering

설치방법

npm i react-native-action-button --save
react-native link 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