react native slider intro

？反应生态滑行

一个简单且完整的可自定义的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函数。

贡献

请参阅了解如何为存储库和开发工作流程贡献的贡献指南。

执照

麻省理工学院