react native slider intro下載 - react native slider intro源代碼下載

react native slider intro

其他源碼

v2.1.18

下載

？反應生態滑行

一個簡單且完整的可自定義的React本機軟件包，可實現獨特的滑塊。

安裝

yarn add react-native-slider-intro

或者

npm install react-native-slider-intro --save

運行示例項目

ios

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 ;

該軟件包包括兩個渲染選項。除了可以將data作為sliderintroitemprops props的數組傳遞時，您還可以使用children和numberOfSlides屬性使用自custom render default render 。

特性

姓名	類型	預設值	描述
`data`	大批	[]	`Default render` - 項目數組。如果通過數據，孩子將被忽略。
`numberOfSlides`	大批	數字	`Custom render` - 如果通過兒童，數據將被忽略。在這種情況下，需要數字滑坡。
`children`	反應節點	無效的	`Custom render` -JSX元素要渲染。
`navigationBarBottom`	數字	0	DOT導航容器底部位置的自定義值
`navigationBarHeight`	數字	70	點導航容器的高度
`animateSlideSpeed`	數字	15	滑塊動畫的速度
`navContainerMaxSizePercent`	數字	0.5	導航容器寬度的價值百分比
`dotWidth`	數字	12	“點”導航圓的半徑
`fixDotOpacity`	數字	0.35	每個沒有動畫的點不透明度
`fixDotBackgroundColor`	顏色	灰色的	每個沒有動畫的點背景
`animatedDotBackgroundColor`	顏色	白色的	每個都有動畫的點背景
`animateDotSpeed`	數字	8	點動畫的速度
`animateDotBouncing`	數字	2	所有動畫的“ Bounciness”價值。 https://reaectnative.dev/docs/animated#spring
`hasReactNavigation`	布爾	錯誤的	當您使用React-Navigation時，backutton行為存在麻煩。在這種情況下，您應該使用`useFocusEffect`來達到預期的行為。更多信息：https：//reaectnavigation.org/docs/custom-android-back-back-button handling/#why-not-use-component-lifecycle-methods
`useCustomBackHandlerEffect`	功能	沒有任何	如上所述，有時我們應該重寫基本的反手行為。此屬性將是自定義掛鉤。有關更多信息，請參見示例：React Navigation自定義掛鉤示例
`backHandlerBehaviour`	細繩	Activeminusone	該道具可以控制骨button行為。該值應為`activeMinusOne`或`previous`
`skipLabel`	細繩	跳過	Skip按鈕的自定義標籤
`nextLabel`	細繩	下一個	下一個按鈕的自定義標籤
`doneLabel`	細繩	完畢	自定義標籤完成按鈕
`renderSkipButton`	功能	默認跳過/上一個按鈕渲染器	用於提供自己的跳過/上一個按鈕
`renderNextButton`	功能	默認下一個按鈕渲染器	用於提供自己的下一個按鈕
`renderDoneButton`	功能	默認完成按鈕渲染器	用於提供自己的按鈕
`onDone`	功能	沒有任何	完成按鈕的行為
`onSkip`	功能	沒有任何	跳過按鈕的行為
`showLeftButton`	布爾	真的	在左側顯示跳過或上一個按鈕
`leftButtonType`	細繩	跳過	左側的按鈕類型應`skip`或`previous`
`columnButtonStyle`	布爾	錯誤的	按鈕將顯示在列中
`showStatusBar`	布爾	錯誤的	在屏幕頂部顯示狀態欄。您可以在此組件之外製作自己的狀態欄
`statusBarColor`	顏色	＃FEBE29	狀態欄的背景顏色
`renderStatusBar`	功能	默認狀態欄渲染器	用於提供您自己的狀態欄組件
`limitToSlide`	數字	（設備最大寬度） * 0.35	用於更改幻燈片動畫的極限。它是根據Panresponder的`gestureState.dx`屬性來計算的。

例子

基本示例
列按鈕示例
自定義按鈕示例
上一個按鈕示例
狀態欄示例
自定義滑塊渲染功能示例
React Navigation自定義掛鉤示例（無法運行，該文件包含更多信息您可以測試它。）
用第三方庫自定義軟件包的另一個示例。

故障排除

TouchableOpacity OnPress函數：我已經在官方的React-Native存儲庫上創建了一個新問題，因為TouchableOpacity ， Button和Pressable可在PanResponder中使用React-Navigation NavigationContainer 。我的解決方案：從react-native-gesture-handler而不是react-native TouchableWithoutFeedback -foodfeedback，而不是使用onPressIn代替onPress函數，然後覆蓋RenderItem函數。