react native slider intro Download - react native slider intro исходный код скачать

react native slider intro

Другой исходный код

v2.1.18

Скачать

? React-Cnive-Slider-Intro

строить

Простая и полная настраиваемая натуральная пакет, которая реализует уникальный ползунок.

Установка

yarn add react-native-slider-intro

или

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

Запуск примера проекта

ios

yarn example ios

Android

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 ;

Пакет включает в себя два варианта рендеринга. Помимо default render , когда вы можете передавать data в качестве массива реквизита SliderIntRoitemProps, вы можете использовать custom render с children и свойствами numberOfSlides .

Характеристики

Имя	Тип	Значение по умолчанию	Описание
`data`	множество	[]	`Default render` - массив элементов. Дети будут проигнорированы, если данные будут переданы.
`numberOfSlides`	множество	число	`Custom render` - Если дети будут переданы, данные будут игнорироваться. NumberOfslides требуется в этом случае.
`children`	Реагировать	нулевой	`Custom render` - элементы JSX для рендеринга.
`navigationBarBottom`	число	0	Постоянное значение точечного навигационного контейнера нижнего положения
`navigationBarHeight`	число	70	Высота навигационного контейнера точечного навигации
`animateSlideSpeed`	число	15	Скорость анимации слайдера
`navContainerMaxSizePercent`	число	0,5	Процентное значение ширины навигационного контейнера
`dotWidth`	число	12	Радиус круга навигации «точка»
`fixDotOpacity`	число	0,35	Каждая точка непрозрачность, у которой нет анимации
`fixDotBackgroundColor`	цвет	серый	Каждый фон точек, у которого нет анимации
`animatedDotBackgroundColor`	цвет	белый	Каждый фон точек, у которых есть анимация
`animateDotSpeed`	число	8	Скорость точечной анимации
`animateDotBouncing`	число	2	«Bandciness» ценность всех анимаций. https://reactnative.dev/docs/animated#spring
`hasReactNavigation`	логический	ЛОЖЬ	Существует проблема с поведением за задней клеткой, когда вы используете React-Navigation. В этом случае вы должны использовать `useFocusEffect` для достижения ожидаемого поведения. Более подробная информация: https://reactnavigation.org/docs/custom-android-back-button-handling/#why-not-use-comongent-lifecycle-methothods
`useCustomBackHandlerEffect`	функция	никто	Как я уже упоминал выше, иногда мы должны переписать основное поведение бэк -рук . Это свойство будет нестандартным крючком. См. Пример для получения дополнительной информации: React naugate навигация на заказ пример крюка
`backHandlerBehaviour`	нить	ActiveMinusone	Эта опора может управлять поведением задних кнопок. Значение должно быть `activeMinusOne` или `previous`
`skipLabel`	нить	Пропускать	Пользовательская метка кнопки Skip
`nextLabel`	нить	Следующий	Пользовательская метка следующей кнопки
`doneLabel`	нить	Сделанный	Пользовательская кнопка
`renderSkipButton`	функция	По умолчанию Skip/предыдущий рендеринг кнопки	Используйте для снабжения собственной кнопки Skip/Pret
`renderNextButton`	функция	Следующая кнопка по умолчанию	Используйте для снабжения следующей кнопкой
`renderDoneButton`	функция	Кнопка для по умолчанию	Используйте для снабжения своей собственной кнопкой
`onDone`	функция	никто	Кнопка поведения
`onSkip`	функция	никто	Поведение кнопки Skip
`showLeftButton`	логический	истинный	Показать Skip или предыдущую кнопку на левой стороне
`leftButtonType`	нить	пропускать	Тип кнопки с левой стороны должен быть `skip` или `previous`
`columnButtonStyle`	логический	ЛОЖЬ	Кнопки будут отображаться в столбце
`showStatusBar`	логический	ЛОЖЬ	Показать строку статуса в верхней части экрана. Вы можете сделать свою собственную строку статуса за пределами этого компонента
`statusBarColor`	цвет	#Febe29	Фоновый цвет панели статуса
`renderStatusBar`	функция	Унищик статуса по умолчанию	Используйте для предоставления собственной компонент панели состояния
`limitToSlide`	число	(Устройство максимальной ширины) * 0,35	Используйте для изменения предела анимации слайдов. Он рассчитывается на основе свойства PanResponder `gestureState.dx` .

Примеры

Основной пример
Пример кнопок столбцов
Пример пользовательских кнопок
Предыдущий пример кнопки
Пример панели статуса
Пример функции рендеринга на заказ
React naugation staign Custom Hook Пример (не может быть запущен, файл включает в себя больше информации, как вы можете его проверить.)
Другой пример для настройки пакета с сторонними библиотеками.

Поиск неисправностей

TouchableOpacity Onpress Function: я создал новую проблему в официальном репозитории React-Nation, потому что TouchableOpacity , Button и Pressable не работают внутри PanResponder с React-Navigation NavigationContainer . Мое решение: импортируется TouchableWithoutFeedback react-native-gesture-handler вместо react-native и использовать onPressIn вместо функции onPress а затем перезаписывайте функцию renderitem.