ListViewはスクロールしません

Question

スクロールしない水平のListView（リスト項目a、b、cの画像に表示されています）がありますが、スクロールは行われますが、10回程度のスワイプそれはスクロールする。私は同じ結果をFlatListも使っています。リストビューはInteractable.Viewにありますが、私はInteractable.Viewを取り除きましたが、まだスクロールしませんでした。私は実際のiosデバイスとgenymotionエミュレータでテストしましたが、どちらも同じ結果でした。リストにはa、b、cよりも多くの項目があります。リストには6つの項目があります。

import { StyleSheet, View, Text, FlatList, ListView } from 'react-native' 
    import React, { Component } from 'react' 
    import MapView from 'react-native-maps' 
    import { connect } from 'react-redux' 
    import { 
     Button, 
     Container 
    } from 'native-base' 

import { updateRegion } from './map.action' 
import { OptimizedFlatList } from 'react-native-optimized-flatlist' 
import Icon from 'react-native-vector-icons/FontAwesome' 
import { toggleMenu } from '../search-page/searchPage.action' 
import mapStyle from './style' 
import Interactable from 'react-native-interactable' 
import { setSelectedShop } from '../search-results/searchResults.action' 
import { updateHeight } from '../search-results/searchResultsPresenter.action' 
import { getSelectedProduct } from './markers.selector' 

const mapStateToProps = (state) => ({ 
    region: state.get('map').get('region'), 
    markers: state.get('searchResults').get('products'), 
    selectedProduct: getSelectedProduct(state), 
    height: state.get('searchResultsPresenter').get('height') 
}) 

const mapDispatchToProps = (dispatch) => ({ 
    onRegionChange: (region) => { 
    dispatch(updateRegion(region)) 
    }, 
    onToggleMenuClick:() => { 
    dispatch(toggleMenu()) 
    }, 
    setSelectedShop: id => { 
    dispatch(setSelectedShop(id)) 
    }, 
    updateHeight: height => { 
    dispatch(updateHeight(height)) 
    } 
}) 

class Map extends Component { 

    componentDidMount() { 
    const { store } = this.context 
    this.unsubscribe = store.subscribe(() => { }) 
    } 

    componentWillUnmount() { 
    this.unsubscribe() 
    } 

    componentWillReceiveProps(newProps) { 
    if (newProps.selectedProduct) { 
     let products = newProps.selectedProduct.products 
     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(products) 
     }) 
    } 
    } 

    interactableView; 

    constructor(props) { 
    super(props) 
    this.state = { dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }) } 
    } 

    render() { 
    console.log(this.props.height) 
    return (
     <Container> 
     <MapView 
      style={styles.map} 
      region={this.props.region} 
      onRegionChangeComplete={this.props.onRegionChange}> 
      { 
      this.props.markers.map(marker => { 
       return (
       <MapView.Marker 
        coordinate={marker.shop.coordinate} 
        title={marker.shop.name} 
        identifier={marker.shop.id.toString()} 
        onPress={e => { 
        console.log(e.nativeEvent) 
        this.interactableView.snapTo({ index: 0 }) 
        this.props.setSelectedShop(marker.shop) 
        console.log(this.props.selectedProduct) 
        }} 
       /> 
      ) 
      }) 
      } 
     </MapView> 

     <Button 
      small 
      icon 
      style={mapStyle.toggleMenuButton} 
      onPress={() => this.props.onToggleMenuClick()}> 
      <Icon name="sliders" size={20} color="#FFFFFF" /> 
     </Button> 

     <Interactable.View 
      style={{ 
      flex: 1, 
      flexDirection: 'row', 
      zIndex: 20, 
      borderRadius: 10, 
      backgroundColor: '#222222', 
      padding: 30, 
      paddingTop: 50 
      }} 
      verticalOnly={true} 
      snapPoints={[{ y: this.props.height - 225 }, { y: this.props.height - 50 }]} 
      initialPosition={{ y: this.props.height - 50 }} 
      ref={view => this.interactableView = view} 
      onLayout={(event) => { 
      this.props.updateHeight(event.nativeEvent.layout.height) 
      }} > 


      <View style={{ flex: 1, flexDirection: 'row', height: 50 }}> 
      <Text 
       style={{ 
       color: 'white', 
       position: 'absolute', 
       top: -40, 
       marginBottom: 20, 
       textAlign: 'center', 
       width: '100%' 
       }}> 
       {this.props.selectedProduct ? this.props.selectedProduct.shop.name : ''} 
      </Text> 
      <ListView 
       dataSource={this.state.dataSource} 
       horizontal={true} 
       style={{ 
       height: 200 
       }} 
       renderRow={(rowData)=> { 
       console.log(rowData) 
       return (
        <View style={{ 
        backgroundColor: 'blue', 
        width: 100, 
        borderWidth: 1, 
        borderColor: 'black', 
        margin: 0 
        }}> 
        <Text style={{ color: 'white' }}>{rowData.name}</Text> 
        <View style={{ 
         zIndex: 15, 
         width: '100%', 
         height: '100%', 
         backgroundColor: 'red' 
        }}> 
        </View> 
        </View> 
       ) 
       }} 
      /> 
      </View> 



     </Interactable.View> 
     </Container> 
    ) 
    } 
} 



Map.contextTypes = { 
    store: React.PropTypes.object 
} 

Map.propTypes = { 
    region: React.PropTypes.shape({ 
    latitude: React.PropTypes.number, 
    longitude: React.PropTypes.number, 
    latitudeDelta: React.PropTypes.number, 
    longitudeDelta: React.PropTypes.number 
    }).isRequired, 
    height: React.PropTypes.number, 
    updateHeight: React.PropTypes.func, 
    setSelectedShop: React.PropTypes.func, 
    selectedProduct: React.PropTypes.string, 
    onRegionChange: React.PropTypes.func.isRequired, 
    onToggleMenuClick: React.PropTypes.func.isRequired, 
    markers: React.PropTypes.array 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(Map) 

const styles = StyleSheet.create({ 
    map: { 
    ...StyleSheet.absoluteFillObject, 
    zIndex: 3 
    } 
}) 

どのように私はリストビューではなく、約1 10回のスワイプのうちよりも、すべてのスワイプでスクロールするのですか？

ScrollViewを使用すると同じことが起こります。だから、そこでは何も水平方向にスワイプできません。 interactable.view

Answer 1

作るrenderRowリターンを削除する場合でも、代わりにViewのTouchableHighlightは、リストは、すべてのタッチとスワイプでドラッグされる原因となりました。そして最後に答えに必要不可欠である、私はListViewが今後廃止予定になるので、ListViewからFlatListに切り替えました。この時点で、ListViewが廃止予定になっているということは、official documentationから明らかではないことを述べたことは良いことでした。