浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】リストアイテムを横方向にスワイプできる「react-native-swipe-list-view」ライブラリ

まだ実際にアプリに組み込んではいないのですが、今後使いたいライブラリです。
「react-native-swipe-list-view」と、iOS でよく見かけるリストページでアイテムを右または左にスワイプすると、削除などのボタンが表示されるリストを実装出来るライブラリです。

GitHub のページはこちらから。

jemise111/react-native-swipe-list-view: A React Native ListView component with rows that swipe open and closed
https://github.com/jemise111/react-native-swipe-list-view

 

インストールのコマンドは下記の通りです。

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

使い方は React Native の FlatList とほぼ同じみたいです。

import { SwipeListView } from 'react-native-swipe-list-view';
<SwipeListView
    data={this.state.listViewData}
    renderItem={ (data, rowMap) => (
        <View style={styles.rowFront}>
            <Text>I am {data.item.text} in a SwipeListView</Text>
        </View>
    )}
    renderHiddenItem={ (data, rowMap) => (
        <View style={styles.rowBack}>
            <Text>Left</Text>
            <Text>Right</Text>
        </View>
    )}
    leftOpenValue={75}
    rightOpenValue={-75} />

違いは 8行目 の renderHiddenItem と 14行目・15行目の leftOpenValuerightOpenValue くらいみたいです。
こちらを追加することで、リストアイテムを横スワイプした時に表示するボタンを設定できるようですね。

コードを見る感じではそこまで苦戦せずに実装できそうな気がします。
現在、アプリのデザインが変わっている最中で、まだ実装するか決まってはいないのですが、ちょっと面白そうなので是非実装してみたいですね!

 

以上、React Native でリストのアイテムに横スワイプして操作する機能を実装できるライブラリ「react-native-swipe-list-view」のご紹介でした。
実装したら、また改めて記事にしたいと思います!

  • この記事いいね! (0)