react-native-sideswipe使用攻略_简单跨平台的React Native可滑动的组件

react-native-sideswipe使用攻略

GitHub:https://github.com/kkemple/react-native-sideswipe

react-native-sideswipe使用攻略_简单跨平台的React Native可滑动的组件

简介描述:简单跨平台的React Native可滑动的组件

一个简单的,跨平台的React Native可滑动组件,具有合理的默认值 ,非常灵活的API。

安装

yarn add react-native-sideswipe

使用

import { Dimensions } from 'react-native';
import SideSwipe from 'react-native-sideswipe';

import CustomComponent from '...'
import data from '...'

export default class SweetCarousel extends Component {
  state = {
    currentIndex: 0,
  };

  render = () => {
    // center items on screen
    const { width } = Dimensions.get('window');
    const contentOffset = (width - CustomComponent.WIDTH) / 2;

    return (
      <SideSwipe
        index={this.state.currentIndex}
        itemWidth={CustomComponent.WIDTH}
        style={{ width }}
        data={data}
        contentOffset={contentOffset}
        onIndexChange={index =>
          this.setState(() => ({ currentIndex: index }))
        }
        renderItem={({ itemIndex, currentIndex, item, animatedValue }) => (
         <CustomComponent
            {...item}
            index={itemIndex}
            currentIndex={currentIndex}
            animatedValue={animatedValue}
          />
        )}
      />
    );
  };
}

海计划公众号
(0)
上一篇 2020/03/10 11:22
下一篇 2020/03/10 11:22

您可能感兴趣的内容