react native slider intro
v2.1.18
ユニークなスライダーを実装するシンプルで完全なカスタマイズ可能なReactネイティブパッケージ。
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 ;パッケージには2つのレンダリングオプションが含まれています。 SliderIntroItemPropsのプロップの配列としてdataを渡すことができる場合default renderに加えて、 childrenとnumberOfSlidesプロパティを使用したcustom renderを使用できます。
| 名前 | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
data | 配列 | [] | Default render - アイテムの配列。データが渡されると、子供は無視されます。 |
numberOfSlides | 配列 | 番号 | Custom render - 子供が合格した場合、データは無視されます。この場合、数字のスライドが必要です。 |
children | ReactNode | ヌル | Custom render - レンダリングするJSX要素。 |
navigationBarBottom | 番号 | 0 | DOTナビゲーションコンテナボトム位置のカスタム値 |
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を使用している場合、バックボタンの動作に問題があります。この場合、 useFocusEffectを使用して、予想される動作に到達する必要があります。詳細：https：//reactnavigation.org/docs/custom-android-button handling/#why-not-use-component-lifecycle-methods |
useCustomBackHandlerEffect | 関数 | なし | 上で述べたように、時には基本的なバックハンドラーの動作を書き直す必要があります。このプロパティはカスタムフックになります。詳細については、例を参照してください：React Navigation Custom Hookの例 |
backHandlerBehaviour | 弦 | アクティベミヌスン | この小道具は、バックボタンの動作を制御できます。値は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プロパティに基づいて計算されます。 |
TouchableOpacity OnPress関数： TouchableOpacity 、 Button 、 Pressable PanResponder内で作業しないため、React-Navigation NavigationContainerで動作しないため、公式のReact-Nativeリポジトリに新しい問題を作成しました。私の解決策： react-native-gesture-handlerからTouchableWithoutFeedbackを使用してTouchableでインポートし、 react-native関数onPress代わりにonPressInを使用して、RenderItem関数を上書きします。
リポジトリと開発ワークフローに貢献する方法を学ぶための寄稿ガイドを参照してください。
mit
