web-dev-qa-db-ja.com

RNフラットリストで現在表示されているインデックスを取得する方法

各項目がwidth:300私がやろうとしているのは、現在表示されているアイテムのインデックスを取得することだけです。

<FlatList 
            onScroll={(e) => this.handleScroll(e)} 
            horizontal={true}
            data={this.state.data}
            renderItem...

これを試しました：

handleScroll(event) {
    let index = Math.ceil(
      event.nativeEvent.contentOffset.x / 300
    );

そして、このようなもの：

handleScroll(event) {
  let contentOffset = event.nativeEvent.contentOffset;
  let index = Math.floor(contentOffset.x / 300);

しかし、正確なものは何もありません。常に1つのインデックスをアップまたはダウンします。
何が間違っているのですか？フラットリストで現在の正しいインデックスを取得する方法は？

たとえば、リストの8番目にあるリスト項目を取得しますが、インデックス9または10を取得します。
enter image description here

javascriptreact-nativereact-native-flatlistreact-native-scrollview
18
1110

[〜＃〜] upd [〜＃〜]。 onViewableItemsChangedを更新しないように指示してくれたfzyzcjyに感謝します

FlatList onViewableItemsChanged propを使用して、必要なものを取得できます。

class Test extends React.Component {
  onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  }

  render () => {
    return (
      <FlatList
        onViewableItemsChanged={this.onViewableItemsChanged }
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50
        }}
      />
    )
  }
}

viewabilityConfigは、視認性の設定で必要なものを作成するのに役立ちます。コード例では50は、アイテムが50パーセント以上表示されている場合、表示されていると見なされることを意味します。

構成構造を見つけることができます here

35
Roman Osypov
this.handleScroll = (event) => {
  let yOffset = event.nativeEvent.contentOffset.y
  let contentHeight = event.nativeEvent.contentSize.height
  let value = yOffset / contentHeight
}

<FlatList onScroll={this.handleScroll} />

丸め値を取得して、ページ番号/インデックスを計算します。

5
Sujit

最も投票された回答に感謝します:)しかし、試してみるとうまくいかず、changing onViewableItemsChanged on the fly is not supported。いくつかの検索の後、私は解決策を見つけます here 。エラーなしで実行できる完全なコードを次に示します。重要な点は、render（）関数内ではなく、2つの構成をclass propertiesとして配置することです。

class MyComponent extends Component {  
  _onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  };

  _viewabilityConfig = {
    itemVisiblePercentThreshold: 50
  };

  render() {
    return (
        <FlatList
          onViewableItemsChanged={this._onViewableItemsChanged}
          viewabilityConfig={this._viewabilityConfig}
          {...this.props}
        />
      </View>
    );
  }
}
5
fzyzcjy

@fzyzcjyと@Romanの回答に関連しています。リアクションでは、16.8 +でuscCallbackを使用してchanging onViewableItemsChanged on the fly is not supportedエラー。

function MyComponent(props) {
    const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
        console.log("Visible items are", viewableItems);
        console.log("Changed in this iteration", changed);
    }, []);

    const _viewabilityConfig = {
        itemVisiblePercentThreshold: 50
    }

    return <FlatList
            onViewableItemsChanged={_onViewableItemsChanged}
            viewabilityConfig={_viewabilityConfig}
            {...props}
        />;
}
1
tiran