标签: react-native-listview

所以我们想要的是:

多列型

在iOS中,我们可以为每个单元格类型使用多个cellIdentifier来创建高性能列表视图.

我现在拥有的是什么

render() {
  const dataBlob = [
    { type: "address", data: { address, gotoEditAddress } },

    { type: "deliveryTime", data: {...} },

    { type: "cartSummary", data: {...} },

    ...[items.map(item => {{ type: "item", data: {...} }})],

    { type: "paymentInformation", data: {...} },
    { type: "paymentBreakdown", data: {...} },
    { type: "promoCode", data: {...} },
  ];

  this._dataSource = this._dataSource.cloneWithRows(dataBlob);

  return (
    <ListView ref="ScrollView"
        renderRow={this._renderRow}
        dataSource={this._dataSource} />
  );
)

并在renderRow方法上

_renderRow = (rowData) => {
  const { type, data …

当在react-native中的Flatlist中单击一行时,如何使Flatlist导航到下一个屏幕？

编辑:我在JS文件中发布了所有代码.

这是我的平面列表代码:

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    FlatList,
    Button,
    TouchableOpacity,
    TouchableHighlight
} from 'react-native'

const Tasks = (props) => {
     const { navigate } = props.navigation;
     return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Task 1'},
            {key: 'Task 2'},
            {key: 'Task 3'},
            {key: 'Task 4'},
            {key: 'Task 5'},
          ]}
          renderItem={({item}) => <TouchableHighlight onPress={() => this.goToNextScreen()}>
      <Text style={styles.item}>{item.key}</Text>}
</TouchableHighlight>}
        />
          <TouchableOpacity style={{ height: 50, marginTop: 5, marginLeft: 100, marginRight: 100 }}>
         <Button
              onPress={()=>navigate('Steps')} …

我state用来存储以下数据。

state = {
    refresh: true,
    isFetching: true,
    showLoadingBottom: false,
    data: []
};

在componentDidMount我手动调用一个_fetchData将数据加载到this.state.data.

当 flatlist 滚动到最后时，它会触发_fetchData两次，最终两次返回相同的数据（这是另一个问题，为什么它会触发两次？）。

一旦 flatlist 到达末尾，即没有更多数据从服务器返回，它就会进入一个无限循环，因为onEndReached即使服务器没有返回新数据并this.state.data保持不变，它也会一遍又一遍地不断触发。

这是我的render代码

render() {

    return (

        <View
            style={{
                flex: 1
            }}>

            <FlatList

                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refresh}
                        onRefresh={() => {
                            this.setState({
                                refresh: true
                            }, this._fetchData);
                        }}
                        title={"Pull To Refresh"}
                        tintColor={darkGrey}
                        titleColor={darkGrey}/>
                }

                onEndReachedThreshold={0.5}
                onEndReached={() => {
                    this.setState({
                        showLoadingBottom: true
                    }, () => {
                        this._fetchData();
                    });

                }}

                showsVerticalScrollIndicator={false} …

有人可以建议任何用于响应本机的数据表组件，这些组件可以动态添加行并具有可编辑的单元格。我在Google中搜索完毕。提前致谢。

这是我们的FlatList，打个招呼：

<FlatList
    data={this.state.dates}
...
/>

我们用以下日期输入：

this.state = {
    dates: [
        '21/06/2019',
        '22/06/2019',
        '23/06/2019',
    ]
};

然后，当可见日期更改（onViewableItemsChanged）时，如果我们到达第一个项目（21/06/2019），则会添加数据，以便新状态变为：

dates: [
        '18/06/2019',
        '19/06/2019',
        '20/06/2019',
        '21/06/2019',
        '22/06/2019',
        '23/06/2019',
]

问题：

我们之后预先考虑的数据，而不是仍然看到21/06/2019（这是在前面加上发生的日期），我们现在看到19/06/2019。

这是因为在引擎盖下，21/06/2019以前是索引0，但在前缀之后，索引0对应于19/06/2019。

我们想要什么：

我试图做到这一点，以便在添加数据后的一天保持不变。

请不要告诉我使用，scrollToPosition因为这确实是黑客，而不是解决方案。有什么好办法解决这个问题吗？

谢谢

我一直在使用React Native为Android和iOS平台开发移动应用程序.我一直在寻找滑动式ListView和碰上了SwipeableRow在阵营本土的发行v0.27.0.似乎还没有文档.如果有人使用过它,请指导我们

• 到底是做什么的？
• 如何使用它？

我有一个关于Listview元素对齐的问题,这些元素应该以更加盒装的方式显示而不是以行方式显示.在图片中,您可以看到当前状态,该状态是使用Listview的contentContainerStyle prop中使用的StyleSheet代码生成的:

ListViewStyle: {
  flexDirection: 'row',
  flexWrap: 'wrap',
}

我想要实现的是包装Listview元素,而不是在行换行之后开始新行,因此在Listview元素的顶部没有空格.

知道如何实现这个漂亮干净吗？谢谢!

我ListView用来显示一个列表,comments也可能subcomments是它们是否存在于评论中.我试图subcomment通过它滚动到一个特定的ref,但我无法让它工作.我使用了3个组件(在下面简化)来实现这个目的:

1.评论

import React, { Component } from 'react'
import { TouchableOpacity, ListView, View, Text } from 'react-native'
import CommentRow from './commentRow'

const ds = new ListView.DataSource({ rowHasChanged: ( r1, r2 ) => r1.id !== r2.id });
const commentsDataSource = [
  {id: '1', body: 'comment 1'},{id: '2', body: 'comment 2'},{id: '3', body: 'comment 3'},{id: '4', body: 'comment 4'},{id: '5', body: 'comment 5'},{id: '6', body: 'comment 6'},{id: '7', body: 'comment 7'},{id: …

我很好奇为什么 React Native 不使用原生平台列表组件，例如 Android 的 RecyclerView 和 iOS 的 UITableView (CollectionView)。

理想情况下，这可以提供比目前可用的更多的功能支持和改进的性能。

React Native 列表是否有理由完全由 ScrollViews 支持？

在我的本机应用程序中,我正在尝试使用复选框显示我的应用程序联系人详细信息以供选择.这是我的代码:

<ListView
  dataSource={this.state.dataSource}
  renderRow={(rowData,sectionID,rowID) =>
    <TouchableHighlight onPress={() => this.goRideDetails(rowData)}>
      <Text style={styles.rideHeader}>{rowData.name} </Text> 
      <CheckBox checked={this.state.checked} onCheckBoxPressed={()=>this.setState({checked:!this.state.checked})}/>
    </TouchableHighlight>
 }/>

在我的视图中,复选框显示在每一行,但不起作用.

任何人都可以帮助我.谢谢.