0

左または右にSwipeRowスワイプすることによってトリガーされるイベントを探しています。SwipeListView

目標は、スワイプで簡単に消せるプッシュ式の通知にすることです。左(緑) と右(赤)にスワイプすると、通知の色が徐々に変化します。特定のしきい値 (60) の後、最終イベントがトリガーされます。この場合、受け入れ(左) と拒否(右) で、通知は消えます。

現在、これは削除する予定のボタンによって行われています。

SwipeListView ドキ​​ュメントから、これは役に立つかもしれません:

onRowClose - スワイプ行が閉じているときに呼び出される関数

onRowOpen - スワイプ行がアニメーションで開くときに呼び出される関数

swipeRowStyle - SwipeRow の親ラッパー ビューのスタイルを持つオブジェクト

leftOpenValue - 行を左に開くための TranslateX 数値 (正の数)

rightOpenValue - 行を右に開くための TranslateX 数値 (負の数)

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, ListView } from 'react-native';
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view'
var data = [ { id:0, notification: true, },{ id:1, notification: false, },{ id:2, notification: false, } ];

class SampleApp extends Component {

  render() {
    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2 });
    return (
      <SwipeListView
        dataSource={ds.cloneWithRows(data)}
        onRowClose={() => {console.log("list.onRowClose")}}
        onRowOpen={() => {console.log("list.onRowClose")}}
        renderRow={ (data, secId, rowId, rowMap) => {
          return (
            <SwipeRow disableRightSwipe={false} disableLeftSwipe={false} leftOpenValue={60} rightOpenValue={-60} onRowClose={() => {console.log("row.onRowClose")}} onRowOpen={() => {console.log("row.onRowClose")}} swipeRowStyle={{}} leftOpenValue={60} rightOpenValue={-60}>
              <View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center', borderWidth:1}}>
                  <Text style={{flex: 1, paddingVertical:50,backgroundColor:'green', left:0, right:0, textAlign: 'left'}}>Accept</Text><Text style={{flex: 1, paddingVertical:50, backgroundColor:'red', left:0, right:0,textAlign:'right'}}>Reject</Text>
              </View>
              <View>
                  <Text style={{left:0, right:0, paddingVertical:50,borderWidth:1, backgroundColor:'grey'}}>Notification</Text>
              </View>
            </SwipeRow>
          );
        }}
      />
    );
  }
}
AppRegistry.registerComponent('SampleApp', () => SampleApp);

左スワイプ

左スワイプ

右にスワイプ

右にスワイプ

4

1 に答える 1