web-dev-qa-db-ja.com

Reactネイティブフラットリストの最初のスクロールダウン

Reactネイティブで<Flastlist />を使用してチャットを作成しようとしています

Whatsappや他のチャットアプリと同様に、メッセージは下から始まります。

APIからメッセージを取得した後、呼び出します

this.myFlatList.scrollToEnd({animated: false});

しかし、それは中央のどこかにスクロールし、時には下部にあるアイテムが少なくなり、時には何もしません。

最初に一番下までスクロールするにはどうすればよいですか？

チャットメッセージの高さが異なるため、高さを計算できません。

react-nativechatreact-native-flatlist
8
yooouuri

同様の問題がありました。下部からチャットメッセージを開始したい場合は、「inverted」をtrueに設定し、メッセージとタイムタグを反対方向に表示できます。

FlatListの「反転」プロパティについては、こちらをご覧ください。 https://facebook.github.io/react-native/docs/flatlist#inverted

チャットメッセージを先頭に表示したい場合は、これを達成しようとしています。あなたが言ったように、高さが異なるため、「scrollToEnd」が奇妙な動作をするgetItemLayoutを使用できなかったため、FlatListで解決策を見つけることができませんでした。

@My Maiが言及したアプローチに従い、代わりにScrollViewを使用し、setTimeout関数でscrollToEnd（{animated：false}）を実行します。さらに、scrollToEndが完了するまでコンテンツを非表示にする状態を追加したので、ユーザーにはスクロールが表示されません。

3
CAIsoul

私はあなたと同じ問題に直面し、ScrollViewを使用するようになりました。修正されています：

componentDidMount() {
  setTimeout(() => {
    this.scrollView.scrollToEnd();
  });
}

<ScrollView ref={(ref) => { this.scrollView = ref; }} style={styles.messages}>
      {
        messages.map((item, i) => (
          <Message 
            key={i} 
            direction={item.userType === 'banker' ? 'right' : 'left'} 
            text={item.message} 
            name={item.name}
            time={item.createdAt}
          />
        ))
      }
    </ScrollView>`
2
My Mai

initialScrollIndexをデータセットの長さ-1に設定します。

つまり.

<Flatlist
data={dataSet}
initialScrollIndex={dataSet.length - 1}
/>
1
peralmq

RNはレイアウトを推測できないため、「移動」する必要がある量を知ることができないと推測しています。ドキュメントのスクロールメソッドによると、getItemLayout関数を実装する必要があります。そのため、RNはスクロールする必要がある量を知ることができます。

https://facebook.github.io/react-native/docs/flatlist.html#scrolltoend

0
sfratini

最初のレンダリングでFlatListを最下部までスクロールしたい場合。 FlatListにinverted = {-1}を追加しました。私は数時間下にスクロールするのに苦労していますが、それは反転= {-1}で終わります。 getItemLayoutとinitialScrollIndexを使用してFlatListアイテムの高さを動的に測定することや、これまでのことについて考える必要はありません。

0
HE xinhao