react-native-smooth-swipe-list, 在iOS邮件应用程序中,在列表视图之后建模的一个组件

分享于 

8分钟阅读

GitHub

  繁體
A swipe-able ListView component modeled after the list view in the iOS Mail app.
  • 源代码名称:react-native-smooth-swipe-list
  • 源代码网址:http://www.github.com/ProvataHealth/react-native-smooth-swipe-list
  • react-native-smooth-swipe-list源代码文档
  • react-native-smooth-swipe-list源代码下载
  • Git URL:
    git://www.github.com/ProvataHealth/react-native-smooth-swipe-list.git
    Git Clone代码到本地:
    git clone http://www.github.com/ProvataHealth/react-native-smooth-swipe-list
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ProvataHealth/react-native-smooth-swipe-list
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    在iOS邮件应用程序的列表视图之后, react-native-smooth-swipe-list 一个 swipe ListView。
    • React native> = 0.47.0使用 1.4.0

    • React native <0.47.0使用 1.3.2

    示例

    example gif

    运行示例
    git clone git@github.com:ProvataHealth/react-native-smooth-swipe-list.gitcd react-native-smooth-swipe-listcd Example
    npm install
    react-native run-ios #or react-native run-android

    安装

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

    用法

    一个 SwipeList 从它的props.rowData 构建一个 ListView.DataSource。 数据源主要是由 SwipeRow 包装的rowData 提供的视图

    ...importSwipeListfrom'react-native-smooth-swipe-list';constListParent=React.createClass({
     propTypes: {
     // takes in array of todo objects... },
     componentDidMount() {
     // it's a good idea to store the derived rowData to prevent // unnecessary re-renders of the rows in the ListView this.rowData=this.props.todos.map(this.constructRowData);
     },
     componentWillReceiveProps(nextProps) {
     // however if you store the derived data you will need to handle the // logic for whether a rowData element needs to be replaced... },
     constructRowData(todo) {
     return {
     id:todo.id,
     rowView:this.getRowView(todo),
     leftSubView:this.getMarkCompleteButton(), //optional rightSubView:this.getArchiveButton(), //optional style:styles.row//optional but recommended to style your rows };
     },
     getRowView() {
     // return the view that will be the face of the row... },
     getMarkCompleteButton() {
     // return your touchable view, it can be whatever ... },
     getArchiveButton() {
     ... },
     render() {
     return<SwipeList rowData={this.rowData} />;
     }
    });

    API

    SwipeList组件

    道具
    • FlatList道具。
    • rowData - 具有以下属性的对象:
      • id ( 必选) - 用于识别 rowData
      • rowView ( 必选) - 查看用作 row
      • [left/right]SubView - 查看向左或者向右滑动时显示的视图
      • [left/right]leftSubViewOptions - 自定义左和右subviews的选项
        • fullWidth 视图 span 视图的完整宽度( 以行为单位)
        • 如果没有有效的手势,则该行是否应在媒体上关闭( 如果没有)。
      • style - 应用于行 root 视图的样式
      • props - 你想在 SwipeRow 上设置的任何附加道具
    • gestureTensionParams - 提供调整手势张力的功能
      • threshold - 张力将开始被应用的点,即( 默认 subViewWidth )。
      • stretch - 手势的过去长度 ( 默认 1 )
      • resistanceStrength 手势过去长度的阻力 ( 在 0 -1之间,默认 0.5 )
    • scrollEnabled 是否允许滚动 ListVIew ( 默认: true )
    • onScrollStateChange - 用于响应启用的( true ) 或者禁用( false )的钩子的钩子
    • swipeRowProps - 所有 SwipeRow 上设置的道具
    • rowStyle - 应用于所有行的root 视图的样式
    • onSwipeStateChange - 回调接收有关刷新状态( SWIPE_START,SWIPE_END,OPEN_ROW_START,OPEN_ROW_END,CLOSE_ROW_START,CLOSE_ROW_END ) 更新的回调
    • style - 应用于ListView的样式

    方法

    • tryCloseOpenRow() - 关闭所有打开的行
    • calloutRow(rowNumber, amount):Promise - 用 amount 打开该行,然后关闭它

    SwipeRow组件

    有关手势事件的信息,请参见React native PanResponder

    道具
    • id - 行数据的id
    • style - 应用于行容器的样式
    • rowViewStyle - 应用内部行视图的样式
    • gestureTensionParams - 提供调整手势张力的功能
      • threshold - 张力将开始被应用的点,即( 默认 subViewWidth )。
      • stretch - 手势的过去长度 ( 默认 1 )
      • resistanceStrength 手势过去长度的阻力 ( 在 0 -1之间,默认 0.5 )
    • swipeEnabled - 行应该响应手势的位置
    • onGestureStart - 在初始笔势之前,在'onswipestart'调用'
    • onSwipeStart - 当手势启动时调用
    • onSwipeUpdate - 在开始和结束之后调用手势的每次更新
    • onSwipeEnd - 当手势结束时调用
    • onOpenStart - 在行打开动画开始时调用
    • onOpenEnd - 在行动画结束时调用
    • onCloseStart - 当行结束动画开始时调用
    • onCloseEnd - 当行结束结束时调用
    • onCapture - 当发生手势捕获时调用
    • [left/right]SubView - 为左/右手势呈现
    • [left/right]SubViewOptions - 配置左和右子视图的选项
      • fullWidth 视图 span 视图的完整宽度( 以行为单位)
      • 如果没有有效的手势,则该行是否应在媒体上关闭( 如果没有)。
    • startOpen - 行是否应开始打开
    • 如果 true 在到达rowView事件之前捕获手势事件( 缺省: true )
    • closeOnPropUpdate - 是否在新的道具出现时关闭行?
    • animateRemoveSpeed - 在移除行时对该行进行动画处理的速度( 默认值: 150 )
    • animateAddSpeed - 在移除行时对该行进行动画处理的速度( 默认值: 150 )

    方法

    • close(skipAnimation) - 关闭行。可以跳过动画设置。
    • open(side, skipAnimation) - 在 side 上打开行。 ,可以跳过动画动画。

    功能清单

    • 支持任意大小的左/右子视图
    • 支持基本惯性
    • 最小化渲染/更新的数量
    • 从SwipeList移除SwipeRows的动画效果
    • 将SwipeRows添加到SwipeList的动画
    • 通过左/右按钮而不是视图以方便使用
    • 多子视图交错位置转换
    • 将平移信息传递给子视图( 比如。 用于动画图标,背景颜色等

    COM  VIEW  模式  lis  列表  component  
    相关文章