目录正文如何使用它1.安装并导入 React-native-intro-carousel2.示例应用程序预览正文 一个带有分页功能的介绍页面旋转木马(onboarding)动画。
一个带有分页功能的介绍页面旋转木马(onboarding)动画。
# 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';
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 旋转木马的资料请关注编程网其它相关文章!
--结束END--
本文标题: 适用于React Native 旋转木马应用程序介绍
本文链接: https://www.lsjlt.com/news/170128.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0