> 웹 프론트엔드 > JS 튜토리얼 > 실제 사례에 React Native 플로팅 버튼 컴포넌트 적용하기(코드 포함)

실제 사례에 React Native 플로팅 버튼 컴포넌트 적용하기(코드 포함)

php中世界最好的语言
풀어 주다: 2018-06-11 09:49:03
원래의
1556명이 탐색했습니다.

이번에는 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('你点了我!')}}
   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: 길게 누르기 이벤트 시 오프셋 위치

  5. buttonText: 버튼 제목

  6. verticalOrientation: 팝업의 방향 버튼, 위 또는 아래

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

  8. ActionButton .Item
  9. size: 버튼의 크기, 기본값은 56
  10. title: 버튼 제목

buttonColor: 버튼 색상

  1. onPress: Click event

  2. 이 사례를 읽어보셨을 거라 믿습니다. 더 흥미로운 정보를 원하시면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!

  3. 추천 도서:
  4. BubbleTransition 실제 사례 자세한 설명
  5. Vue+animate는 프로젝트에서 전환 애니메이션을 만듭니다

위 내용은 실제 사례에 React Native 플로팅 버튼 컴포넌트 적용하기(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿