ListView没有滚动

Question

我有一个水平ListView（图片中显示的列表项a，b，c）不会滚动，或者更确切地说，它会滚动 - 但是十分之一左右的滑动似乎可以实现滚动。我也使用了FlatList - 相同的结果。 ListView位于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
  }
})

如何让每次滑动滚动列表视图，而不是大约十分之一的滑动？

使用ScrollView时会发生同样的事情。所以没有什么可以在那里水平滑动。即使删除interactable.view

也是如此

Answer 1

让renderRow返回TouchableHighlight而不是View会导致列表在每次触摸和滑动时都可以拖动。最后，对答案不重要，我从ListView切换到FlatList，因为ListView将来会被弃用。我觉得很好地说明，在official documentation ListView class MyClass { public string S1; public string S2; } List<MyClass> MyList= new List<MyClass>();被弃用的时候还不清楚。