代码之家 › 专栏 › 技术社区 › Asleepace

在Chromebook上不滚动ListView

chromebook react-native listview

Asleepace · 技术社区 · 8 年前

目前正在chromebook上进行react原生项目,我的一些列表视图拒绝滚动。这个问题很奇怪,因为它们在普通的android设备、ios设备甚至我的应用程序的其他部分都可以正常工作,但是在两个特定的情况下,它们不会滚动。

我已经尝试了所有的建议 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,并硬编码一个高度,但没有效果。奇怪的是,我的应用程序的其他部分的代码完全相同。任何帮助都将不胜感激,谢谢!

1 回复 | 直到 8 年前

Asleepace 8 年前

我找到了一个临时的解决方案,这是一个小技巧,但仍然有效,它似乎滚动视图不会滚动,除非它有大于可见区域的内容。不管出于什么原因,并不是所有的内容都是最初加载的,所以我创建了一个异步重新加载方法,并将其关闭大约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);
}