FlatList不滚动

23 浏览
0 Comments

FlatList不滚动

我创建了一个屏幕，在屏幕上显示了一个包含FlatList的组件。由于某种原因，我无法滚动列表。有人能发现我的错误并指点我正确的方向吗？

屏幕文件中的render函数和样式：

render() {
  return (
    
      
      
    
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    overflow: 'hidden',
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  list: {
    flex: 1,
    overflow: 'hidden',
  },
});

列表项组件中的render函数和样式：

export default class CardItem extends React.PureComponent {
  render() {
    return (
      
        
          
        
        
          {this.props.title}
          
            {this.props.date}
            {this.props.hour}
          
        
      
    );
  }
}
const styles = StyleSheet.create({
  cardview: {
    flex: 1,
    justifyContent: 'flex-start',
    backgroundColor: 'white',
    elevation: 3,
    maxHeight: 200,
    width: Dimensions.get('window').width - 20,
    margin: 1,
    marginTop: 10,
    borderRadius: 4,
  },
  imagecontainer: {
    flex: 7,
    height: 140,
    borderRadius: 4,
  },
  cardimage: {
    flex: 1,
    opacity: 0.8,
    height: 140,
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
  },
  cardinfo: {
    flex: 2,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
  },
  cardtitle: {
    flex: 1,
    fontSize: 16,
    fontWeight: 'bold',
  },
  cardtext: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  textdate: {
    color: '#5e5e71',
  },
  texthour: {
    color: '#5e5e71',
  },
});

列表组件中的render函数和样式：

export default class ActivityList extends React.Component {
  _renderCardItem = ({ item }) => (
    
  );
  _keyExtractor = item => item.id;
  render() {
    return (
      
    );
  }
}
const styles = StyleSheet.create({
  cardcontainer: {
    flex: 1,
    overflow: 'hidden',
    backgroundColor: 'white',
    alignItems: 'center',
    width: Dimensions.get('window').width,
    borderWidth: 0,
  },
});

我的数据项都有唯一的id、标题、日期和时间。我阅读了所有可用的指南和文档，但没有找到解决方法。

0