标签: react-native-listview

我们可以像这样为ListView创建数据源

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});  
var dataSource =  ds.cloneWithRows(['row 1', 'row 2']), };

但是,如果我想添加项目或从数据源中删除项目,我该怎么做？我是否需要始终使用更新的数组调用cloneWithRows？

我遇到了新的FlatList组件的问题.具体来说,它不会重新渲染它的行,即使该行依赖于变化的道具.

FlatList文档说:

这是一个PureComponent,这意味着如果道具保持浅层相等,它将不会重新渲染.确保您的renderItem函数所依赖的所有内容在更新后作为非_ =的prop传递,否则您的UI可能无法更新更新.这包括数据支柱和父组件状态.

问题

但是,当我更改selectedCategory项目的ID时 - 应该指示行是否被"选中"的道具 - 我相信道具应该重新渲染.我错了吗？

我检查了列表和行组件的'componentWillReceiveProps'方法,列表接收更新就好了,但是从不调用行的生命周期方法.

如果我在列表组件中包含一个随机的,无用的布尔状态值,并在道具更新时来回切换它,它可以工作 - 但我不知道为什么？

state = { updated: false };

componentWillReceiveProps(nextProps) {
  this.setState(oldstate => ({
    updated: !oldstate.updated,
  }));
}

<FlatList
  data={this.props.items.allAnimalCategories.edges}
  renderItem={this._renderRow}
  horizontal={true}
  keyExtractor={(item, index) => item.node.id}
  randomUpdateProp={this.state.updated}
/>

代码

我的代码的结构是这样的:我有一个包含所有逻辑和状态的容器组件,它包含一个FlatList组件(表示,无状态),它还包含一个自定义的表示行.

Container
  Custom list component that includes the FlatList component
  (presentational, stateless) and the renderRow method
    Custom row (presentational, stateless)

容器包含此组件:

 <CustomList
   items={this.props.viewer}
   onCategoryChosen={this._onCategoryChosen}
   selectedCategory={this.state.report.selectedCategory}
 />

CustomList:

class CustomList extends Component {
  _renderRow = ({ item }) => {
    return …

我在真正的Android设备上使用React Native.在主应用程序组件上只使用以下渲染功能创建一个非常简单的应用程序时......

render() {
  <Image
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
    style={
      {
        flex: 1,
        resizeMode: 'contain',
        backgroundColor: 'yellow'
      }          
    } />
}

我在我的设备上得到以下结果:

正如你所看到的那样整个背景是黄色的,这告诉我们图像元素确实占据了整个屏幕的大小.但这只是错误的.'cover'resizeMode确实按预期工作('stretch'模式也是如此).这是"包含"模式不起作用(从我的角度来看最重要的模式).将图像放在ListView上时问题变得更加严重,因为图像甚至都没有显示.

更新1 正如弗雷德里克所指出的,"包含"仅在图像大于容器大小时才有效.那么我们怎样才能让图像在保持纵横比的同时占据整个容器的大小？React中的样式尚不支持百分比,并且我不知道如何在加载图像后获取图像宽度和高度属性.与Image组件关联的任何事件都不提供该信息.

更新2 好消息.我现在正在使用React Native v0.24.1,现在看起来图像'包含'模式正如预期的那样工作,即使实际图像大小小于其容器.zvona的解决方案很好(尽管你需要记住,onLayout会给你渲染图像的图像视图大小,但不是正在加载的实际图像大小).至于现在,我不知道有什么方法可以找出实际的图像大小(让我们假设你是从网络资源中检索图像而你不知道大小,如果你想计算它可能非常重要它的宽高比).

我正在寻找一种在React-native中制作水平ListView或FlatList的方法.如下图所示:https://i.stack.imgur.com/D4RA5.jpg

我尝试使用Flex管理它,但这会让我产生奇怪的结果,并且总是使用垂直ListView

如果您有任何想法,请告诉我.

问候,

有没有办法找出react-native的listview/scrollview组件的滚动方向？

机iOS成分似乎能够通过计算来做到这一点从偏移scrollViewWillBeginDragging和scrollViewDidScroll,但似乎这些不绑定.

我ListView在单个ScrollView组件中有3 个组件,如下所示:

<ScrollView>
  <Header />
  <ListView onEndReached={() => alert('load more 1')}/>
  <ListView onEndReached={() => alert('load more 2')}/>
  <ListView onEndReached={() => alert('load more 3')}/>
  <Footer />
</ScrollView>

该Header组件有一些共同的内容,还有3个选项卡,触发显示相应的ListView

问题是任何ListView与onEndReached={() => alert('load more 1')}从未运行警报,所以我向下滚动,撞上列表视图结束时,我不能加载更多.删除包装ScrollView和警报运行,但常见的Header不滚动,因为我们刚刚删除了包装ScrollView.标题需要使用listview滚动,这就是为什么我包装了需要滚动的所有内容ScrollView.

重要提示: 我真的不能用ListView同renderHeader={this.header},对于这种情况.因为,即使Header将滚动,它会重新描绘的共同Header和3个选项卡每个ListView每次ListView渲染,而不是一次.因此Header,每次每次重新渲染都ListView不会为应用程序削减它.

寻找这个问题的解决方案,其中Header带有listviews 的滚动和onEndReached触发可见的滚动ListView.

我有一个自动完成框,它给我一个自动完成项列表.我在FlatList中显示项目,我在FlatList周围也有一个边框.我的代码如下: -

render(){
return (
  <View>
    <TextInput
       clearButtonMode="while-editing"
       onChangeText={this.onChangeText}
       value={this.state.searchText}
       onSubmitEditing={this.onTextSubmitted}
       placeholder="Find..." />
       {this.state.data.length > 0 &&
        <FlatList
           style={styles.list}
           keyboardShouldPersistTaps="handled"
           data={this.state.data}
           ItemSeparatorComponent={this.renderSeparator}
           keyExtractor={item => item.properties.id}
           renderItem={this.renderItem} />});
}

const styles = StyleSheet.create({
list: {
    borderWidth: 16,
    borderColor: colors.searchBorder,
  },
});

如何使用列表项的数量增加/减少FlatList的大小(我认为边框是此错误背后的原因).

我想在React Native中水平滚动ListView的某些部分.

如何修复第一列的位置并使其他列可水平滚动？

我在屏幕顶部显示了按钮(使用react-native-scrollable-tab-view).在按钮下面,我有ListView部分标题.

滚动时有没有办法让标题粘在标签视图的下边缘？

我很难尝试将ListView标题标题粘在Facebook TabBar的底部,它的默认设置是坚持屏幕顶部.

当我滚动时,节标题在标签栏下滑动.

有什么想法吗？我应该在FacebookTabBar.js中做些什么来改变这项工作吗？

顶部没有标签栏

标签栏位于顶部

注意:奇怪的是这个GIF没有正确显示完整的动画; 你可以想象列表滚动了很多,节标题在标签栏下滑动.

节标题样式

catListHeaderContainer: {
    padding: 12,
    backgroundColor: '#1F2036',
}

FacebookTabBar风格

var styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },

  tabs: {
    height: 60,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 0,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0)',
  },

  activeTabTitle: {
    marginTop: 40,
    color: '#3B5998',
  },

  nonActiveTabTitle: {
    marginTop: 40,
    color: '#BDBDBD',
  },

});

我有一个事件部分,其中包含包含日期的章节标题.我需要能够跳转到特定日期,并将初始滚动位置设置为将来的第一个日期.

为了跳转到特定日期,我尝试将他们的y位置存储在州.

renderSectionHeader= (sectionData, sectionID) => (
      <View
        onLayout={(event) => {
          const { y } = event.nativeEvent.layout;
          const sectionPosition = { [sectionID]: y };
          const sectionPositions = Object.assign({}, this.state.sectionPositions, sectionPosition);
          this.setState({ sectionPositions });
        }}
       ...

我遇到了这种方法的问题,但是因为没有在列表下方的元素上调用renderSectionHeader(由于延迟渲染).

然后我尝试以数学方式计算位置,但这会导致每个部分的渲染在靠近给定日期时显示在屏幕上.

有没有办法达到我的需要？

有关

React Native ListView:如何滚动到特定行

https://github.com/facebook/react-native/issues/499

UPDATE

在我的应用程序中,我知道所有行都是完全相同的高度.

使用contentOffset={{ y: offsetY }}而不是setScroll不起作用,因为它仍然需要渲染到给定项目的所有项目才能工作.

使用initialListSize={99999999}确实有效,但使页面变得非常慢,我被警告不要使用它.

更新2

是否可以将我的初始内容提供给数据源,然后更新数据以在屏幕上当前元素之前和之后添加额外的项目？

或者是否有一个我没找到的图书馆可以满足我的需求？