适用于热爱,积极,乐观豁达的题记（适用于React Native 旋转木马应用程序介绍）
导读：正文 一个带有分页功能的介绍页面旋转木马（onboarding）动画。...
正文
一个带有分页功能的介绍页面旋转木马（onboarding）动画 。
如何使用它
1.安装并导入 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.示例应用程序
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,
},
});
预览
The postApp Introduction Carousel For React Nativeappeared first onReactScript.
以上就是适用于React Native 旋转木马应用程序介绍的详细内容 ，更多关于React Native 旋转木马的资料请关注本站其它相关文章！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！