ray-rn-swipe-view

author

ilex.h

install

$ npm install --save ray-rn-swipe-view

Usage

basic

import SwipeView from 'ray-rn-swipe-view';

const NativeButton = NativeButton;
const SwipeoutButton = SwipeViewBtn;

// Buttons
var swipeviewBtns = [
  {
    text: 'Button'
  }
]

// Swipeout component
<SwipeView right={swipeviewBtns}>
  <View>
    <Text>Swipe me left</Text>
  </View>
</SwipeView>

With List

import SwipeView from 'ray-rn-swipe-view';
import { AppColors } from './styles/colors';

const NativeButton = NativeButton;
const SwipeoutButton = SwipeViewBtn;

// Buttons
const btnsDefault = [{ text: 'Button' }];

const btnsTypes = [
  { text: 'Primary', type: 'primary' },
  { text: 'Secondary', type: 'secondary' },
  { text: 'Delete', type: 'delete' }
];

const rows = [
  { text: '基础使用', right: btnsDefault },
  {
    text: '按钮事件',
    right: [
      {
        text: '点击试试',
        onPress(){ alert('button pressed'); },
        type: 'primary'
      }
    ]
  },
  { text: '按钮 types', right: btnsTypes },
  { text: '自定义按钮样式',
    right: [
      {
        text: 'Button',
        backgroundColor: AppColors.buttonGreen,
        color: AppColors.snow,
        underlayColor: AppColors.bloodOrange
      }
    ]
  },
  {
    text: '自定义滑动超出部分颜色',
    right: btnsDefault,
    backgroundColor: AppColors.bloodOrange
  },
  {
    text: 'SwipeView autoClose={true}',
    right: btnsDefault,
    autoClose: true
  },
  {
    text: 'Five buttons (full-width) + autoClose={true}',
    right: [
      { text: '按钮1' },
      { text: '按钮2' },
      { text: '按钮3' },
      { text: '按钮4' },
      { text: '按钮5' }
    ],
    autoClose: true
  },
  {
    text: '自定义Button',
    right: [
      {
        component: <Image style={{ flex: 1 }} source={require('./../images/avatar/ilex.png')} />
      }
    ]
  },
  { text: 'Swipe me right (buttons on left side)', left: btnsDefault},
  { text: 'Buttons on both sides',  left: btnsTypes,  right: btnsTypes }
];

constructor() {
  super();

  //  datasource rerendered when change is made (used to set swipeout to active)
  var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => true });

  this.state = {
    dataSource: ds.cloneWithRows(rows),
    sectionID: null,
    rowID: null
  };
}

_renderRow = (rowData, sectionID, rowID) => {
  return (
    <SwipeView
      close={!(this.state.sectionID === sectionID && this.state.rowID === rowID)}
      left={rowData.left}
      right={rowData.right}
      rowID={rowID}
      sectionID={sectionID}
      autoClose={rowData.autoClose}
      backgroundColor={rowData.backgroundColor}
      onOpen={(sectionID, rowID) => {
        this.setState({
          sectionID,
          rowID
        });
      }}
      onClose={() => console.log('close')}
      scroll={event => console.log('scroll event')}
    >
      <TouchableWithoutFeedback onPress={() => console.log('press item')}>
        <View style={styles.li} >
          <Text style={styles.liText}>{rowData.text}</Text>
        </View>
      </TouchableWithoutFeedback>
    </SwipeView>
  );
}

// Swipeout component
<ListView
  scrollEnabled
  dataSource={this.state.dataSource}
  renderRow={this._renderRow}
  style={styles.listview}
/>

Props

Prop | Type | Default | Description --------------- | ------ | --------- | ----------- autoClose | bool | false | auto close on button press backgroundColor | string | '#dbddde' | close | bool | | close swipeview disabled | bool | false | whether to disable the swipeview left | array | [] | swipeview buttons on left onOpen | func | | (sectionID, rowId, direction: string) => void onClose | func | | (sectionID, rowId, direction: string) => void right | array | [] | swipeview buttons on right scroll | func | | prevent parent scroll style | style | | style of the container sensitivity | number | 50 | change the sensitivity of gesture buttonWidth | number | | each button width

SwipeView Button props

Prop | Type | Default | Description --------------- | ------ | --------- | ----------- backgroundColor | string | '#b6bec0' | background color color | string | '#ffffff' | 按钮内容颜色 component | Node or element | null | 按钮自定义内容 onPress | func | null | 按钮按下事件 text | string | 'Click'| 按钮内容 type | string | 'default' | 可取的值:default, delete, primary, secondary underlayColor | string | null | 按下按钮的颜色 disabled | bool | false | 禁用