神刀安全网

react-native-swipe-list-view

react-native-swipe-list-view

<SwipeListView> is a ListView with rows that swipe open and closed. Handles default native behavior such as closing rows when ListView is scrolled or when other rows are opened.

Also includes <SwipeRow> if you want to use a swipeable row outside of the <SwipeListView>

Example

react-native-swipe-list-view react-native-swipe-list-view

Installation

npm install --save react-native-swipe-list-view

Usage

import { SwipeListView } from 'react-native-swipe-list-view';  render() {     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});     return (         <SwipeListView             dataSource={ds.cloneWithRows(dataSource)}             renderRow={ data => (                 <View style={styles.rowFront}>                     <Text>I am {data} in a SwipeListView</Text>                 </View>             )}             renderHiddenRow={ data => (                 <View style={styles.rowBack}>                     <Text>Left</Text>                     <Text>Right</Text>                 </View>             )}             leftOpenValue={75}             rightOpenValue={-75}         />     ) }

See example.js for full usage guide (including using by itself)

Note:

If your row is touchable (TouchableOpacity, TouchableHighlight, etc.) with an onPress function make sure renderRow returns the Touchable as the topmost element.

GOOD:

renderRow={ data => (     <TouchableHighlight onPress={this.doSomething.bind(this)}>         <View>             <Text>I am {data} in a SwipeListView</Text>         </View>     </TouchableHighlight> )}

BAD:

renderRow={ data => (     <View>         <TouchableHighlight onPress={this.doSomething.bind(this)}>             <Text>I am {data} in a SwipeListView</Text>         </TouchableHighlight>     </View> )}

API

SwipeListView (component)

ListView that renders SwipeRows.

Props

closeOnRowPress

Should open rows be closed when a row is pressed

type: bool defaultValue: true

closeOnScroll

Should open rows be closed when the listView begins scrolling

type: bool defaultValue: true

leftOpenValue

TranslateX value for opening the row to the left (positive number)

type: number defaultValue: 0

renderHiddenRow (required)

How to render a hidden row (renders behind the row). Should return a valid React Element.

type: func

renderRow (required)

How to render a row. Should return a valid React Element.

type: func

rightOpenValue

TranslateX value for opening the row to the right (negative number)

type: number defaultValue: 0

SwipeRow (component)

Row that is generally used in a SwipeListView. If you are rendering a SwipeRow explicitly you must pass the SwipeRow exactly two children. The first will be rendered behind the second. e.g.

<SwipeRow>       <View style={hiddenRowStyle} />       <View style={visibleRowStyle} />   </SwipeRow>

Props

closeOnRowPress

Should the row be closed when it is tapped

type: bool defaultValue: true

friction

Friction for the open / close animation

type: number

leftOpenValue

TranslateX value for opening the row to the left (positive number)

type: number defaultValue: 0

onRowOpen

Called when a swipe row is animating open. Used by the SwipeListView to keep references to open rows.

type: func

rightOpenValue

TranslateX value for opening the row to the right (negative number)

type: number defaultValue: 0

setScrollEnabled

Used by the SwipeListView to close rows on scroll events. You shouldn’t need to use this prop explicitly.

type: func

tension

Tension for the open / close animation

type: number

License

MIT

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » react-native-swipe-list-view

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮