Question

目前在Chromebook上进行本机项目，我的某些ListView拒绝滚动。这个问题很奇怪，因为它们在常规的android设备，iOS设备甚至我的应用程序的其他部分都可以正常工作，但是在2种特定情况下，它们只是不会滚动。

我已经尝试了here上的所有建议，但似乎都没有用。我想知道Chromebook是否有其他原因导致这种情况？

这是ListView代码的一小段：

render() {
    const margin    = PadletCell.sectMargin();
    const cellStyle = Settings.isTablet() ? styles.tabletContainer : {};
    const listStyle = Settings.isTablet() ? styles.listStyleTablet : styles.listStyleMobile;
    const margins   = Settings.isTablet() ? {marginLeft:margin, marginRight:margin} : {};
    return (
      <View style={[styles.flex, listStyle, margins]} onLayout={this.onLayout.bind(this)}>
        <ListView
          renderFooter={()=><View style={{height:96}}/>}
          style={[styles.listView]}
          enableEmptySections={true}
          removeClippedSubviews={false}
          contentContainerStyle={[cellStyle]}
          dataSource={this.state.dataSource}
          ref={listView => this.listView = listView}
          renderRow={(data,section,row) => <PadletCell navigator={this.props.navigator}
                                             id={{section:section,row:row}}
                                             width={this.state.cellWidth}
                                             user={this.state.user}
                                             backOne={true}
                                             data={data}
                                             />}
         refreshControl={
           <RefreshControl
             refreshing={this.state.refreshing}
              onRefresh={this.onRefresh.bind(this)}
           />}
        />
      </View>
    )
  }

这是相应样式的摘录：

const styles = StyleSheet.create({
  listView:{
    paddingTop:Settings.isTablet() ? 16 : 6,
    flex:1,
  },
  listStyleMobile:{
    flex:1,
  },
  listStyleTablet:{
    marginRight:TAB_SECT_MARGIN,
    marginLeft: TAB_SECT_MARGIN,
    flex:1,
  },
  tabletContainer:{
    flexDirection:'row',
    flexWrap:'wrap',
    flex:1,
  },
  flex:{
    flex:1,
  }
});

我试着去掉flex，并且对一个高度进行硬编码无济于事。奇怪的是，代码在我工作的其他部分完全相同。任何帮助将不胜感激，谢谢！

Answer 1

我找到了一个临时解决方案，该解决方案虽然有点小巧，但仍然可以正常使用，除非ScrollView的内容大于可见区域，否则它似乎不会滚动。出于某种原因，并非所有内容最初都在加载，所以我创建了一个异步重新加载方法，并触发了大约10次以填充屏幕，因为每次连续重新加载仅加载了另外一个单元格。

componentDidMount() {
  setTimeout(this.forceReload.bind(this), 500);
}

async forceReload() {
  for (let i=0; i<10; i++) await this.asyncReload();
}

asyncReload() {
  return new Promise((resolve) => {
    this.onRefresh(resolve);
  });
}

onRefresh(callback=()=>{}) {
  const { data } = this.props;
  let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.setState({ dataSource: ds.cloneWithRows(data) }, callback);
}

ListView无法在Chromebook上滚动

1 个答案: