適用于React?Native?旋轉(zhuǎn)木馬應(yīng)用程序介紹
正文
一個(gè)帶有分頁(yè)功能的介紹頁(yè)面旋轉(zhuǎn)木馬(onboarding)動(dòng)畫(huà)。
如何使用它
1.安裝并導(dǎo)入 react-native-intro-carousel
# Yarn $ yarn add react-native-intro-carousel # NPM $ npm i react-native-intro-carousel
import * as React from 'react'; import { Image, StyleSheet, View } from 'react-native'; import Carousel from 'react-native-intro-carousel';
2.示例應(yīng)用程序
export default function App() { return ( <View style={styles.container}> <Carousel data={[ { key: '1', title: 'Cool package', description: 'This is a cool package', backgroundColor: '#e879f2', image, titleStyle: { color: 'white', }, descriptionStyle: { color: 'white', }, }, { key: '2', title: 'Good information here', description: 'This is a good information\nOther text here', backgroundColor: '#f0ae35', image, imagePosition: 'center', // contentStyle: { // justifyContent: 'space-evenly', // }, titleStyle: { color: 'white', }, descriptionStyle: { color: 'white', }, }, { key: '3', title: 'I am tired', description: 'I am tired', backgroundColor: '#79adf2', image, imagePosition: 'bottom', titleStyle: { color: 'white', }, descriptionStyle: { color: 'white', }, }, ]} // renderItem={({ item }) => <Text>{item.title}</Text>} paginationConfig={{ // dotSize: 10, // animated: false, // disabled: true, dotIncreaseSize: 1, dotSpacing: 30, // color: '#00000050', // activeColor: 'black', // activeDotStyle: { // width: 30, // left: -7.5, // } }} buttonsConfig={{ next: { renderButton: (index, onChangeSlider) => ( <View onTouchStart={() => onChangeSlider(index + 1)} style={styles.iconButton} > <Image source={arrowIcon} style={styles.arrow} /> </View> ), }, prev: { disabled: true, }, done: { renderButton: (index, onChangeSlider) => ( <View onTouchStart={() => onChangeSlider(index + 1)} style={styles.iconButton} > <Image source={checkIcon} style={styles.arrow} /> </View> ), }, }} // onFinish={() => console.log('finish')} // onPressSkip={() => console.log('test')} // renderItem={({ item, index }, goToSlide) => ( // <View style={styles.content}> // <Image source={item.image} style={styles.image} /> // <Text>{item.title}</Text> // <Text>{item.description}</Text> // <View style={styles.buttonsContainer}> // <Pressable // style={styles.button} // onPress={() => goToSlide(index - 1)} // > // <Text>Previous</Text> // </Pressable> // <Pressable // style={[styles.button, { marginLeft: 10 }]} // onPress={() => goToSlide(index + 1)} // > // <Text>Next</Text> // </Pressable> // </View> // </View> // )} /> </View> ); }
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ecf0f1', }, content: { flex: 1, alignItems: 'center', justifyContent: 'center', }, button: { padding: 10, backgroundColor: '#47d16c', marginTop: 20, borderRadius: 5, }, buttonsContainer: { flexDirection: 'row', }, image: { width: 200, height: 200, }, arrow: { width: 30, height: 30, }, iconButton: { padding: 10, borderRadius: 50, backgroundColor: '#00000050', }, });
預(yù)覽
The postApp Introduction Carousel For React Nativeappeared first onReactScript.
以上就是適用于React Native 旋轉(zhuǎn)木馬應(yīng)用程序介紹的詳細(xì)內(nèi)容,更多關(guān)于React Native 旋轉(zhuǎn)木馬的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09React觸發(fā)render的實(shí)現(xiàn)方法
這篇文章主要介紹了React觸發(fā)render的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10react中使用heatmap.js實(shí)現(xiàn)熱力圖的繪制
heatmap.js?是一個(gè)用于生成熱力圖的?JavaScript?庫(kù),React?是一個(gè)流行的?JavaScript?庫(kù),用于構(gòu)建用戶界面,本小編給大家介紹了在React?應(yīng)用程序中使用heatmap.js實(shí)現(xiàn)熱力圖的繪制的示例,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12React報(bào)錯(cuò)Function?components?cannot?have?string?refs
這篇文章主要為大家介紹了React報(bào)錯(cuò)Function?components?cannot?have?string?refs解決方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決
這篇文章主要為大家介紹了react組件中過(guò)渡動(dòng)畫(huà)的問(wèn)題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09React中useTransition鉤子函數(shù)的使用詳解
React?18的推出標(biāo)志著React并發(fā)特性的正式到來(lái),其中useTransition鉤子函數(shù)是一個(gè)重要的新增功能,下面我們就來(lái)學(xué)習(xí)一下useTransition鉤子函數(shù)的具體使用吧2024-02-02