React Native 플로팅 버튼 구성 요소의 샘플 코드

이 기사에서는 주로 React Native 플로팅 버튼 구성 요소의 샘플 코드를 소개합니다. 이 기사에서는 모든 사람의 학습이나 작업에 대한 특정 참조 학습 가치가 있으므로 아래에서 살펴보십시오.

React 네이티브 플로팅 버튼 구성 요소: 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(&#39;你点了我！&#39;)}}
   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. active: 버튼 표시 여부

3. position: 버튼의 위치, 왼쪽 가운데 오른쪽

4. offset 클릭 이벤트

5. onLongPress: 길게 누르기 이벤트

6. buttonText: 버튼 제목

7. verticalOrientation: 팝업 버튼의 방향(위 또는 아래)

8. renderIcon: 버튼 표시 스타일을 사용자 정의할 수 있습니다. 기본값은 하나의 더하기 기호입니다.

9. ActionButton.Item
size: 버튼의 크기, 기본값은 56

title: 버튼 제목

1. buttonColor: 버튼 색상

2. onPress :Click event

3. 위 내용은 제가 정리한 것입니다. . 앞으로도 도움이 되길 바랍니다.

관련 기사:

4. Ajax에서 얻은 데이터가 echarts에 표시되지 않는 이유에 대한 분석 및 해결 방법

객체를 사용하여 Ajax 반복 호출을 캡슐화하는 방법

ajax 도메인 간 요청 획득 구현 웹페이지의 iframe Ajax 데이터를 기반으로 합니다

위 내용은 React Native 플로팅 버튼 구성 요소의 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!