ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード

基本的にすべてのeコマースプロジェクトにはショッピングカートの機能があります。これはreact-nativeに関する記事です。ネイティブAndroidについては長い間書いていませんでした。ネイティブ ショッピング カートを作成していたとき、製品に関する本質を問うような疑問に遭遇したのを覚えています。スワイプして削除する機能は iOS では可能なのに、Android では実装が難しいのはなぜでしょうか?この時、WeChatを開いてみると、Android版のWeChatも長押しで操作しているのに対し、iOS版はスライド操作で操作しており、2つのプラットフォームのシステムインタラクション操作が異なっていることがわかりました。もちろん、結局私は、スライド削除を実行するために、さまざまなサードパーティライブラリを静かに探し続けました。

rnのプロジェクトは、リストスライド操作用のインターネット上で見つかったサードパーティのライブラリでもあります。githubアドレス react-native-swipe-list-view

最も基本的な使用法はflatListに似ており、データ属性は配列データソースで、renderItemはデータからデータを1つずつ取得し、リストにレンダリングします。

<スワイプリストビュー
  データ={this.state.listViewData}
  レンダリングアイテム = {this.renderItem}
  keyExtractor={this.keyExtractor}
/>

このとき、通常の flatList エフェクトと同様に、左または右にスライドすることはできません。左右へのスライドを有効にするには、renderHiddenItem 属性を追加します。 renderHiddenItem は、非表示のコンテンツをレンダリングします。非表示のコンテンツの位置は、フレックス レイアウトによって制御されます。次の例では、水平レイアウトを使用し、space-between を通じて左側と右側のコンテンツを制御し、左または右にスライドすると非表示のコンテンツが表示されるようにしています。

//これは左右にスライドできます renderHiddenItem = (data, rowMap) => {
  戻る <View style={{
    フレックス: 1,
    flexDirection: '行'、
    justifyContent: 'スペースの間'
  }}>
    <Text>左</Text>
    <Text>右</Text>
  </表示>
}

左にスワイプできるだけで十分であり、justifyContent: 'flex-end' プロパティを使用して削除ボタンのコンテンツを右端に配置し、SwipeListView プロパティのdisableRightSwipe を設定して右スワイプ操作を禁止します。

renderHiddenItem = (データ、行マップ) => {
  戻る <View style={{
    フレックス: 1,
    flexDirection: '行'、
    justifyContent: 'flex-end'、
  }}>
    <TouchableOpacity スタイル={{
      背景色: '#FF496C',
      幅: 80,
      justifyContent: 'center'、
      alignItems: 'center'
    }}>
      <Text style={{color:'#fff'}}>削除</Text>
    </タッチ可能な不透明度>
  </表示>
}

この時、左にスワイプすると右側に削除ボタンが表示されるのが分かりますが、常に開いた状態になるわけではありません。開いた状態にするには rightOpenValue={-80} 属性も追加する必要があります。

<スワイプリストビュー
  右スワイプを無効にする
  データ={this.state.listViewData}
  レンダリングアイテム = {this.renderItem}
  keyExtractor={this.keyExtractor}
  renderHiddenItem={this.renderHiddenItem}
  右オープン値={-80}
/>

もう一つ注意すべき点は、renderItem がリストをレンダリングしているとき、公式の推奨では、<View/> ではなく、クリック可能でタッチに反応するビューを最外層に使用することです。通常、ビューが開かれているときに別のビューをクリックすると、開かれている項目はデフォルトで閉じられます。最外層が <View/> の場合、この効果は発生しません。

// 最も外側のレイヤーは TouchableHighlight です
レンダリングアイテム = ({item, index}, rowMap) => {
  戻り値 <TouchableHighlight
    押すと{() => {
    }}
    アンダーレイカラー={'#fff'}>
    ...
  </タッチ可能なハイライト>
}

この時点で、スライドして削除する効果は基本的に満たされています。 後続は、追加および削除操作のためのビジネス ロジックとデータ ソース更新ページです。

これで、ショッピングカートのスライド削除効果を実装するための react-native のサンプルコードに関するこの記事は終了です。さらに関連する react-native スライド削除コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。