SwipeableFlatList

具有侧滑效果的FlatList

react native 官方提交15de8d1

#props

renderQuickActions?: ?(rowdata, sectionID, rowID) => ? React.Element<any>

用于创建侧滑菜单

maxSwipeDistance?: ?PropTypes.number\PropTypes.func

设置最大滑动距离

bounceFirstRowOnMount?: boolean

默认值flase，为true时第一行先向左滑动，再向右滑动。

_onClose() — (Function) — Reference method that close QuickActions if any.

关闭quickAction面板 this.swipeableList._onClose()

其余属性参考FlatList

详细信息可查看链接

#实例

        <SwipeableFlatList
          //数据源
          data={this.state.dataArray}
          // 每个item的View
          renderItem={data => this._renderItem(data)}
          // refreshing={this.state.isLoading}
          // onRefresh={this.loadData}
          // 下拉刷新
          refreshControl={
            <RefreshControl
              title={"Loading"} //ios
              colors={["red"]}
              size={5}
              refreshing={this.state.isLoading}
              onRefresh={() => this.loadData(true)}
            />
          }
          // 上拉加载
          ListFooterComponent={this.getIndicator}
          onEndReached={() => this.loadData()}
          //侧滑菜单
          renderQuickActions={this.getQuickAction} //侧滑展示的View
          maxSwipeDistance={60} //侧滑最大距离
          bounceFirstRowOnMount={false}
        />

getQuickAction = () => {
    return(
      <View style={styles.quickContainer}>
        <TouchableHighlight
          onPress={() => alert("确认删除？")}
        >
          <View style={styles.quick}>
            <Text style={styles.text}>删除</Text>
          </View>
        </TouchableHighlight>
      </View>
    )
  }