まだ実際にアプリに組み込んではいないのですが、今後使いたいライブラリです。
「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行目の leftOpenValue、rightOpenValue くらいみたいです。
こちらを追加することで、リストアイテムを横スワイプした時に表示するボタンを設定できるようですね。
コードを見る感じではそこまで苦戦せずに実装できそうな気がします。
現在、アプリのデザインが変わっている最中で、まだ実装するか決まってはいないのですが、ちょっと面白そうなので是非実装してみたいですね！
以上、React Native でリストのアイテムに横スワイプして操作する機能を実装できるライブラリ「react-native-swipe-list-view」のご紹介でした。
実装したら、また改めて記事にしたいと思います！
