web-dev-qa-db-ja.com

フラットリストでScrolltoIndexが反応ネイティブで機能しない

flatListを使用してjsonファイルからアイテムをレンダリングしています。ボタンが押されたときに特定のインデックスにスクロールしたいので、ボタンを押すための関数を次のように宣言しました

goIndex = () => {
    this.flatListRef.scrollToIndex({animated: true,index:5});
};

エラーは表示されませんが、リストは指定されたインデックスに移動していません。

反応ネイティブ：0.55.4

FlatListの添付コード。

<View>
    <FlatList   
        getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }}
        ItemSeparatorComponent={ () => <View style={ { width:"100%", height: .7, backgroundColor: 'rgba( 52,52,52,1)' } } /> }
        data={this.state.outverse}
        renderItem={({item,index}) =>
            <View style={styles2.flatview}>
                <Text style={styles2.name}>{++index}  {item} </Text>
            </View>
        }
    />
</View>
listreact-nativescrollreact-native-flatlist
5
Joji Thomas

以下のようにFlatListコンポーネントへの参照を追加してみてください：

<View>
    <FlatList   
        getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }}
        ItemSeparatorComponent={ () => <View style={ { width:"100%", height: .7, backgroundColor: 'rgba( 52,52,52,1)' } } /> }
        data={this.state.outverse}
        ref={(ref) => { this.flatListRef = ref; }}
        renderItem={({item,index}) =>
            <View style={styles2.flatview}>
                <Text style={styles2.name}>{++index}  {item} </Text>
            </View>
        }
    />
</View>

そしてgoIndex関数で：

goIndex = () => {
    this.refs.flatListRef.scrollToIndex({animated: true,index:5});
};
3
Kirankumar Dafda

以下を試してください：

<FlatList
        style={{
          marginLeft: 50,
          paddingTop: 0,
          paddingRight: 0
        }}
        ref={ref => {
          this.flatList_Ref = ref;  // <------ ADD Ref for the Flatlist 
        }}
        removeClippedSubviews={false}
        enableEmptySections={false}
        data={this.props.list}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem1}
        ItemSeparatorComponent={this._renderSeparator}

      />

次にgoIndex関数を呼び出します。

goIndex = () => {

 this.flatList_Ref.scrollToIndex({animated: true,index:5});

};
1
A.Matt