ListView 不在 Chromebook 上滚动

Question

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

我已经尝试了上的所有建议，但 none 似乎有效。我想知道是不是 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 次以填满屏幕，因为每次连续重新加载只加载 1 个额外的单元格。

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 上滚动

ListView not scrolling on Chromebook

listview

chromebook

react-native