react native slider intro
v2.1.18
고유 한 슬라이더를 구현하는 간단하고 완전한 사용자 정의 가능한 React Native 패키지.
yarn add react-native-slider-intro또는
npm install react-native-slider-intro --saveiOS
yarn example ios기계적 인조 인간
yarn example android import React from 'react' ;
import SliderIntro from 'react-native-slider-intro' ;
const slides = [
{
index : 1 ,
title : 'First step' ,
text : 'Simple description.' ,
link : 'https://pccontroller.rnstudio.hu' ,
image : require ( './images/step1.png' ) ,
backgroundColor : '#febe29' ,
} ,
{
index : 2 ,
title : 'Second step' ,
text : 'Simple description for the second step.' ,
image : require ( './images/step2.png' ) ,
backgroundColor : '#febe29' ,
} ,
] ;
const BasicExample = ( { closeExample } : { closeExample : ( ) => void } ) => {
return (
< SliderIntro data = { slides } onDone = { closeExample } onSkip = { closeExample } / >
) ;
} ;
export default BasicExample ; 패키지에는 두 가지 렌더링 옵션이 포함되어 있습니다. SliderIntroitemProps 소품의 배열로 data 전달할 수있는 default render 외에도 children 및 numberOfSlides 속성과 함께 custom render 사용할 수 있습니다.
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
data | 정렬 | [] | Default render - 항목 배열. 데이터가 전달되면 어린이는 무시됩니다. |
numberOfSlides | 정렬 | 숫자 | Custom render - 어린이가 통과되면 데이터가 무시됩니다. 이 경우 이름이 필요합니다. |
children | reactnode | 널 | Custom render -JSX 요소 렌더링. |
navigationBarBottom | 숫자 | 0 | 도트 내비게이션 컨테이너 하단 위치의 사용자 정의 값 |
navigationBarHeight | 숫자 | 70 | 도트 내비게이션 컨테이너의 높이 |
animateSlideSpeed | 숫자 | 15 | 슬라이더 애니메이션의 속도 |
navContainerMaxSizePercent | 숫자 | 0.5 | 내비게이션 컨테이너 폭의 백분율 값 |
dotWidth | 숫자 | 12 | '도트'내비게이션 원의 반경 |
fixDotOpacity | 숫자 | 0.35 | 애니메이션이없는 불투명도 |
fixDotBackgroundColor | 색상 | 회색 | 애니메이션이없는 각 도트 배경 |
animatedDotBackgroundColor | 색상 | 하얀색 | 애니메이션이있는 각 점 배경 |
animateDotSpeed | 숫자 | 8 | 도트 애니메이션의 속도 |
animateDotBouncing | 숫자 | 2 | 모든 애니메이션의 '바운스 니스'가치. https://reactnative.dev/docs/animated#spring |
hasReactNavigation | 부울 | 거짓 | React-Navigation을 사용할 때 Backbutton 동작에 문제가 있습니다. 이 경우 예상 동작에 도달하려면 useFocusEffect 사용해야합니다. 자세한 정보 : https://reactnavigation.org/docs/custom-denroid-back-button hongling/#why-not-use-component-lifecycle-methods |
useCustomBackHandlerEffect | 기능 | 없음 | 위에서 언급했듯이 때로는 기본 백핸드러 동작을 다시 작성해야합니다. 이 속성은 커스텀 훅이 될 것입니다. 자세한 정보는 예제를 참조하십시오 : React Navigation Custom Hook 예제 |
backHandlerBehaviour | 끈 | ActiveMinusone | 이 소품은 Backbutton 동작을 제어 할 수 있습니다. 값은 activeMinusOne 또는 previous 이어야합니다 |
skipLabel | 끈 | 건너뛰다 | 건너 뛰기 버튼의 사용자 정의 레이블 |
nextLabel | 끈 | 다음 | 다음 버튼의 사용자 정의 레이블 |
doneLabel | 끈 | 완료 | 완료 버튼의 사용자 정의 레이블 |
renderSkipButton | 기능 | 기본 스킵/이전 버튼 렌더러 | 자신의 건너 뛰기/이전 버튼을 제공하는 데 사용합니다 |
renderNextButton | 기능 | 기본 다음 버튼 렌더러 | 다음 버튼을 제공하는 데 사용하십시오 |
renderDoneButton | 기능 | 기본 완료 버튼 렌더러 | 자신의 완료 버튼을 제공하는 데 사용하십시오 |
onDone | 기능 | 없음 | 완료 버튼의 동작 |
onSkip | 기능 | 없음 | 건너 뛰기 버튼의 동작 |
showLeftButton | 부울 | 진실 | 왼쪽에 건너 뛰기 또는 이전 버튼을 표시하십시오 |
leftButtonType | 끈 | 건너뛰다 | 왼쪽의 버튼 유형은 skip 거나 previous 합니다. |
columnButtonStyle | 부울 | 거짓 | 버튼이 열에 나타납니다 |
showStatusBar | 부울 | 거짓 | 화면 위에 상태 표시 줄을 표시하십시오. 이 구성 요소 밖에서 자신만의 상태 표시 줄을 만들 수 있습니다. |
statusBarColor | 색상 | #febe29 | 상태 표시 줄의 배경색 |
renderStatusBar | 기능 | 기본 상태 표시 줄 렌더러 | 자신의 상태 표시 줄 구성 요소를 제공하는 데 사용됩니다 |
limitToSlide | 숫자 | (장치 최대 너비) * 0.35 | 슬라이드 애니메이션의 한계를 변경하는 데 사용하십시오. Panresponder의 gestureState.dx 속성에 따라 계산됩니다. |
Button PanResponder NavigationContainer Pressable TouchableOpacity 내 해결책 : 반응-신용 대신 react-native react-native-gesture-handler 의 TouchableWithoutFeedback 사용하고 onPress 기능 대신 onPressIn 사용한 다음 RenderItem 기능을 덮어 씁니다.
리포지토리 및 개발 워크 플로에 기여하는 방법을 배우려면 기고 가이드를 참조하십시오.
MIT
