适用于React Native 旋转木马应用程序介绍

目录

• 正文
• 如何使用它
• 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 旋转木马的资料请关注脚本之家其它相关文章！