问题标签 [react-native-listview]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
4660 浏览

listview - React Native ListView 不会通过单击重新呈现状态更改

这是我的示例代码,我希望ListView在点击时更新元素。

此行定义样式:

在此示例中,活动View应以绿色突出显示。内部状态正在更新handleClick(),但renderField()没有调用方法。

如何使 ListView 在单击触发的状态更改时重新呈现?

RNPlayNative 链接

0 投票
1 回答
1873 浏览

react-native - React Native - 从 renderRow 获取列表视图中自定义组件的引用

我有一个 ListView 并试图访问我在 renderRow 中编写的自定义组件的引用。我需要对自定义组件进行一些直接操作,因此我需要获取这些组件的引用。

似乎其他人也面临过这个问题。我已经尝试遵循React Native 中的建议:ListView中的参考和https://github.com/facebook/react-native/issues/897但它们似乎对我不起作用。我已尝试按照建议使用回调 ref 方法。但是,当我尝试在 componentDidMount 中打印出 this.refs.listView.refs 时,它是空的,而不是返回 customRef。如何从 renderRow 函数中获取自定义组件的引用?谢谢

该类具有以下功能:

0 投票
1 回答
7100 浏览

search - 使用 React Native 进行搜索和过滤

我正在尝试使用本机反应实现搜索和过滤栏,但不太确定如何使用 DataSource 对象。数据采用 JSON 格式,应执行以下操作:

  • 基于查询字符串对提供的 JSON进行全文搜索
  • 基于标记的过滤,使用作为标记提供的标记

这是关于RNPlay (Link)的一个非常简单的示例。

如何在 React Native 中实现搜索和过滤功能?

0 投票
1 回答
5333 浏览

javascript - React Native:带有部分标题和可折叠扩展项目的 ListView

我有一个简单的反应原生应用程序(v 0.27)。我有一个列表视图(包含部分和项目)。我正在使用 react-native-accordion ( https://github.com/naoufal/react-native-accordion ) 使项目可折叠。

一切都很好,没有问题。但我无法在 react native 版本 0.27 中让 react-native-vector-icons 与 TabbarIOS 一起使用(默认情况下,图标大小为 30。当你更改它时,它不起作用。给出错误),但它与 react native 版本一起工作正常0.14.1(像这个https://github.com/catalinmiron/react-native-dribbble-app

为了能够将 react-native-vector-icons 与 tabbarios 一起使用,我恢复到 react-native v0.14.1,它工作正常,但我不能再使用 react-native-accordion,因为它需要 react-native v0.20 或更高。

所以我想问一下,是否有带有部分数据和可折叠项目的列表视图,而不使用 react-native-accordion ?

任何帮助都非常感谢,在此先感谢。

0 投票
1 回答
2270 浏览

facebook - 我们如何使用 React Native 的 v0.27.0 中引入的 SwipeableRow(或 SwipeableListView)?

我一直在为 Android 和 iOS 平台使用 React Native 开发移动应用程序。我一直在寻找 Swipeable ListView 并在 React Native 的Release v0.27.0遇到了 SwipeableRow 。似乎还没有文档。如果有人用过,请指导我们

  • 它到底是做什么的?
  • 如何使用它?
0 投票
2 回答
4287 浏览

react-native - React-Native:选择时 ListView 突出显示行

我想创建一个listView,即选择一行时,将一行重新选择,直到再次选择。我一直在使用reac-native 文档 和其他各种教程中的 ListView 示例,但我无处可去。

一个工作示例甚至是我应该用来为我指明正确方向的方法将不胜感激。

如果还不是很明显,我是 React-Native 的新手。

0 投票
1 回答
8839 浏览

javascript - ReactNative ListView 设置数据加载后的初始滚动位置

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

为了跳转到特定日期,我尝试将它们的 y 位置存储在 state 中。

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

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

有没有办法实现我所需要的?

有关的

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

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

更新

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

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

使用initialListSize={99999999}确实有效,但会使页面非常慢,并且我已被警告不要使用它。

更新 2

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

或者是否有一个我没有找到的库可以满足我的需要?

0 投票
1 回答
1477 浏览

listview - React Native:在一个 SwipeListView 中呈现不同类型的行

SwipeListView应该能够根据notification属性呈现 2+ 种不同类型的行:

  • true用于通知
  • false适用于常规物品

假设这两种类型的行完全不同。我要解决的问题是如何使用允许左右滑动行的SwipeListViewandSwipeRow元素呈现这样的列表,而不是标准的ListView.

我总是遇到拒绝接受回报的方法renderRow()和方法。renderHiddenRow()renderRow(data, secId, rowId, rowMap)

SwipeListView 文档

示例应用程序:

最常见的错误:

SwipeListView.js:renderRow:67: undefined 不是对象(评估'Component.type')

最常见的错误

0 投票
1 回答
2852 浏览

listview - React Native:在 SwipeListView 中捕获滑动事件

我正在寻找通过向左或向右滑动触发的SwipeRow事件SwipeListView

目标是拥有可以通过滑动轻松消除的推送式通知。当向左(绿色)和向右(红色)滑动时,通知应逐渐改变颜色。在某个阈值 (60) 之后应该触发最终事件,在这种情况下接受(左)和拒绝(右)并且通知应该消失。

目前这是通过我计划删除的按钮完成的。

SwipeListView 文档中,这可能很有用:

onRowClose - 当滑动行动画关闭时调用的函数

onRowOpen - 当滑动行动画打开时调用的函数

swipeRowStyle - 具有 SwipeRow 的父包装视图样式的对象

leftOpenValue - 用于向左打开行的 TranslateX 数值(正数)

rightOpenValue - 用于向右打开行的 TranslateX 数值(负数)

向左滑动

向左滑动

向右滑动

向右滑动

0 投票
1 回答
894 浏览

react-native - 当 redux 状态发生变化时,React Native Child Component Not Updated

我有在 ListView 中呈现项目列表的子组件。ListView 的数据来自通过父 mapStateToProps 传递的 Redux 存储对象。子对象具有在按下时将删除项目的按钮。该按钮会触发适当的 redux 调度操作,并且状态会正确更新,但子组件不会更新。通过断点和控制台语句,我已经验证了子 componentShouldUpdate 和子 componentWillReceiveProps 在 redux 状态变化时被触发,但在状态改变后子渲染方法不会触发。

家长

孩子

我也尝试过没有状态字段,这是我期望的工作,但结果相同。