作者:狮子胯下 | 来源:互联网 | 2023-07-29 12:03
目录
- 正文
- 如何使用它
- 1.安装并导入 react-native-intro-carousel
- 2.示例应用程序
- 预览
正文
一个带有分页功能的介绍页面旋转木马(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 (
{item.title}}
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) => (
onChangeSlider(index + 1)}
style={styles.iconButton}
>
),
},
prev: {
disabled: true,
},
done: {
renderButton: (index, onChangeSlider) => (
onChangeSlider(index + 1)}
style={styles.iconButton}
>
),
},
}}
// OnFinish={() => console.log('finish')}
// OnPressSkip={() => console.log('test')}
// renderItem={({ item, index }, goToSlide) => (
//
//
// {item.title}
// {item.description}
//
// goToSlide(index - 1)}
// >
// Previous
//
// goToSlide(index + 1)}
// >
// Next
//
//
//
// )}
/>
);
}
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 旋转木马的资料请关注其它相关文章!