React-Native笔记--react-native-swipe-list-view

项目中用到了侧滑组件 react-native-swipe-list-view，简单做个笔记。
npm install --save react-native-swipe-list-view
import { SwipeListView } from ‘react-native-swipe-list-view’;

import { SwipeListView } from 'react-native-swipe-list-view';
 
onRowDidOpen = rowKey => {
    console.log('This row opened', rowKey);
  };
 
  onSwipeValueChange = swipeData => {
    const { key, value } = swipeData; 
  };
 
  closeRow = (rowMap, rowKey) => {
    console.log(' closeRow rowKey:::', rowKey);
    if (rowMap[rowKey]) {
        rowMap[rowKey].closeRow();
    }
  }
 
 <SwipeListView
          data={this.state.optionalDataSource}     //JSON数据
          keyExtractor={item => String(item.id)}  //关键 手动关闭row
          renderItem={data => (
            <TouchableHighlight
              onPress={() => console.log('You touched me')}
              style={styles.rowFront}
              underlayColor={'#ECECEC 100%'}
            >
              <View style={{ flexDirection: 'row' }}>
                <Image
                  style={{ marginTop: 10, marginBottom: 10 }}
                  source={showActions(data.item.image_url)}
                />
                <View style={{ flexDirection: 'column', }}>
                  <Text style={{ marginTop: 10 }}>
                    {data.item.title}
                  </Text>
                </View>
              </View>
            </TouchableHighlight>
          )}
          renderHiddenItem={(data, rowMap) => ( //隐藏的Item
            <View style={styles.rowBack}>
              <TouchableOpacity
                style={[
                  styles.backRightBtnS,
                  styles.backRightBtnRight,
                ]}
                onPress={() => {
                  this.setState({ showDetailModal: true, exercise: data.item });
                  this.closeRow(rowMap,String(data.item.id)); 
                }
                }
              >
                <Text style={styles.backTextWhite}>
                  Detail
                  </Text>
              </TouchableOpacity>
            </View>
 
          )}
          leftOpenValue={0}
          rightOpenValue={-76} //左滑时 右侧打开的距离
          previewRowKey={'0'}
          previewOpenValue={-40}
          previewOpenDelay={3000}
          onRowDidOpen={this.onRowDidOpen}
          onSwipeValueChange={this.onSwipeValueChange}
        />

官网