React Native ListViewにアイテムを集中させるにはどうすればいいですか？

Question

私は、選択されたときに、水平方向のリストビューの中にアイテムを集中させようとしています。私の現在の戦略は、最初にアイテムを測定し、ビュー内の参照アイテムのx座標にスクロールすることです。

現在、私は非常に終わるx: 538

にアイテムにListView巻物を押す任意の時間は、機能/ステートレスコードを維持しながら、これを実装するための簡単な方法はありますか？

const ItemScroll = (props) => { 

    const createItem = (obj, rowID) => { 

    const isCurrentlySelected = obj.id === props.currentSelectedID 

    function scrollToItem(_scrollViewItem, _scrollView) { 
     // measures the item coordinates 
     _scrollViewItem.measure((fx) => { 
     console.log('measured fx: ', fx) 
     const itemFX = fx; 
     // scrolls to coordinates 
     return _scrollView.scrollTo({ x: itemFX }); 
     }); 
    } 
    return (
     <TouchableHighlight 
     ref={(scrollViewItem) => { _scrollViewItem = scrollViewItem; }} 
     isCurrentlySelected={isCurrentlySelected} 
     style={isCurrentlySelected ? styles.selectedItemContainerStyle : styles.itemContainerStyle} 
     key={rowID} 
     onPress={() => { scrollToItem(_scrollViewItem, _scrollView); props.onEventFilterPress(obj.id, rowID) }}> 
     <Text style={isCurrentlySelected ? styles.selectedItemStyle : styles.itemStyle} > 
      {obj.title} 
     </Text> 
     </TouchableHighlight> 
    ) 
    }; 
    return (
    <View> 
     <ScrollView 
     ref={(scrollView) => { _scrollView = scrollView; }} 
     horizontal> 
     {props.itemList.map(createItem)} 
     {props.onItemPress} 
     </ScrollView> 
    </View> 
); 
}; 

更新

私は今FlatListに切り替えている@Ludovic提案を、私は機能性成分とscrollToIndexを誘発する方法がわかりません。以下は、私の意見では私の新しいItemScroll

const ItemScroll = (props) => { 

    const { 
     itemList, 
     currentSelectedItem 
     onItemPress } = props 

    const renderItem = ({item, data}) => { 
    const isCurrentlySelected = item.id === currentSelectedItem 

    const _scrollToIndex =() => { return { viewPosition: 0.5, index: data.indexOf({item}) } } 

    return (
     <TouchableHighlight 
     // Below is where i need to run onItemPress in the parent 
     // and scrollToIndex in this child. 
     onPress={[() => onItemFilterPress(item.id), scrollToIndex(_scrollToIndex)]} > 
     <Text style={isCurrentlySelected ? { color: 'red' } : { color: 'blue' }} > 
      {item.title} 
     </Text> 
     </TouchableHighlight> 
    ) 
    } 
    return (
    <FlatList 
     showsHorizontalScrollIndicator={false} 
     data={itemList} 
     keyExtractor={(item) => item.id} 
     getItemLayout={(data, index) => (
      // Max 5 items visibles at once 
      { length: Dimensions.get('window').width/5, offset: Dimensions.get('window').width/5 * index, index } 
    )} 
     horizontal   
     // Here is the magic : snap to the center of an item 
     snapToAlignment={'center'} 
     // Defines here the interval between to item (basically the width of an item with margins) 
     snapToInterval={Dimensions.get('window').width/5} 
     renderItem={({item, data}) => renderItem({item, data})} /> 
); 
}; 

Answer 1

で、あなたが直接あなた件のデータの項目に移動することを可能にする方法scrollToIndexを持ってFlatList FlatList

を使用する必要があります。 ScrollViewとほぼ同じですが、よりスマートです。悲しいことに、ドキュメントは非常に貧弱です。ここで

は、私がFlatListについて

let datas = [{key: 0, text: "Hello"}, key: 1, text: "World"}] 

<FlatList 
    // Do something when animation ended 
    onMomentumScrollEnd={(e) => this.onScrollEnd(e)} 
    ref="flatlist" 
    showsHorizontalScrollIndicator={false} 
    data={this.state.datas} 
    keyExtractor={(item) => item.key} 
    getItemLayout={(data, index) => (
     // Max 5 items visibles at once 
     {length: Dimensions.get('window').width/5, offset: Dimensions.get('window').width/5 * index, index} 
    )} 
    horizontal={true} 
    // Here is the magic : snap to the center of an item 
    snapToAlignment={'center'} 
    // Defines here the interval between to item (basically the width of an item with margins) 
    snapToInterval={Dimensions.get('window').width/5}  
    style={styles.scroll} 
    renderItem={ ({item}) => 
     <TouchableOpacity 
      onPress={() => this.scrollToIndex(/* scroll to that item */)} 
      style={styles.cell}> 
      <Text>{item.text}</Text> 
     </TouchableOpacity> 
    } 
/> 

もっとやっFlatListの例である：https://facebook.github.io/react-native/releases/next/docs/flatlist.html