如何在React-Native中选择ListView的一项?

2024-06-03

我是 React-Native 的新手。我想使用 ListView 选择一项。当我第一次按下 item 时,ListView renderRow() 被调用,但终究不起作用!我该如何修复这个错误?我的问题出在哪里?

我写了一个演示here https://gist.github.com/devyu/d855e1bf4eac9d9e2ee14c4c103a9923


我最初设置了空 dataSource,然后将其设置为使用 componentDidMount 中的数据变量进行克隆。然后,在 onPressRow 方法中,我对数据状态变量的副本进行了所需的更改,然后通过 setState 方法将其设置回数据。不确定你的问题是什么,但现在可以了。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight
} from 'react-native';

class ListViewDemo extends Component {

  constructor(props) {
    super(props);

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      data: this._genRow(),
      dataSource: ds,
    }
  }

  componentDidMount() {
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(this.state.data)
    });
  }

  _genRow(){
    var datas = [];
    for (var i = 0; i < 5; i++) {
      datas.push({
        row: i,
        isSelect: false,
      });
    }
    console.log('datas ' + JSON.stringify(datas));
    return datas;
  }

  render() {
    return (
      <ListView
        dataSource = {this.state.dataSource}
        renderRow = {this._renderRow.bind(this)}
        renderHeader = {() => <View style={{height: 10, backgroundColor:     '#f5f5f5'}} />}
        onEndReached = {() => console.log('')}
        renderSeparator = {(sectionID, rowID) =>
          <View
            style={styles.style_separator}
            key={`${sectionID} - ${rowID}`}
          />}
      />
    );
  }

  _renderRow(rowData: string, sectionID: number, rowID: number) {
    console.log('render row ...');
    return (
      <TouchableHighlight onPress={this._onPressRow.bind(this.rowID, rowData)}>
        <View style={styles.style_row_view}>
          <Text style={styles.style_text}>{rowData.row}</Text>
          <Text style={styles.style_text}>{rowData.isSelect ? 'true' : 'false'}                   </Text>
            </View>
          </TouchableHighlight>
        );
      }

  _onPressRow(rowID, rowData) {

    rowData.isSelect = !rowData.isSelect;
    var dataClone = this.state.data;
    dataClone[rowID] = rowData;
    this.setState({
      data: dataClone
    });
    console.log(this.state.data);
  }
}

const styles = StyleSheet.create({
  style_row_view: {
    flex: 1,
    flexDirection: 'row',
    height: 57,
    backgroundColor: '#FFFFFF',
  },
  style_text: {
    flex: 1,
    marginLeft: 12,
    fontSize: 16,
    color: '#333333',
    alignSelf: 'center',
  },

});

AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在React-Native中选择ListView的一项? 的相关文章

  • 如何在 JavaScript 中正确初始化 ErrorEvent?

    我需要开火ErrorEvent以编程方式 但无法弄清楚如何初始化事件的属性 这些属性是只读的 并且initEvent 仅初始化事件类型 是否冒泡以及是否可取消 I tried var myErrorEvent new ErrorEvent
  • 根据id统计div元素

    我有一个类似的页面 div div div div div div div div div div div div 我想知道 id 与表达式 box content X text 其中 X 是数字 匹配的 div 的数量 我可以使用纯 ja
  • JSON数据通过JS/AJAX转化为PHP

    Goal 我正在使用 coinmarketcap com API link https api coinmarketcap com v1 ticker convert EUR 预先我将他们的数据转换成 PHP 样本 现在我想使用AJAX J
  • JavaScript 设置滚动高度

    在 JavaScript 中 将一个元素的滚动高度设置为另一个元素的滚动高度的正确方法是什么 直接赋值没有效果 谢谢 格雷格 直接是不可能的 scrollHeight 是一个只读属性 包含元素内容的总高度 以像素为单位 如果有元素 A 并且
  • Vuex 2.0 调度与提交

    有人可以解释一下什么时候使用调度和提交吗 我理解提交会触发突变 调度会触发操作 然而 派遣不也是一种行动吗 正如你所说 dispatch触发一个动作 并且commit触发突变 以下是如何使用这些概念 你总是用 dispatch来自路线 组件
  • 如何从react-navigation标头调用Screen/Component类方法

    我需要从 React 导航标头调用 SearchScreen 类方法 导航器看起来像这样 Search screen SearchScreen path search query navigationOptions title Search
  • 如何仅在客户端渲染 NextJS 13 中的组件

    我目前正在开发一个项目 该项目要求我的组件对客户端频繁变化的条件做出反应 但据我所知 NextJS 13 似乎强制服务器端渲染 我尝试使用动态加载import dynamic from next dynamic and const Comp
  • @deprecated 的 mergeLatest 重构 - 不再支持 resultSelector,而是通过管道传输到映射吗?

    角度材料文档应用程序包含以下代码片段 Combine params from all of the path into a single object this params combineLatest this route pathFro
  • 从 ElementFinder 数组创建 ElementArrayFinder

    这是一个后续问题当条件评估为 true 时获取元素 扩展 ElementArrayFinder https stackoverflow com questions 32572299 take elements while a conditi
  • JavaScript 检查 null 与 undefined 以及 == 和 === 之间的区别

    如何检查变量是否null or undefined和有什么区别null and undefined 有什么区别 and 很难在 Google 上搜索 如何检查变量是否null or undefined 是变量null if a null o
  • 从 jsonp fetch Promise 获取 json

    我刚刚开始使用react native 并且我正在以文档中的经典示例作为基础 fetch https facebook github io react native movies json then response gt response
  • 客户端与服务器端图像压缩[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在研究用户可以上传图片的东西 图像大小不受限制 现在我有两个选择使用PHP 服务器端 压缩图像或使用
  • 包含菜单按钮的 Ag-grid 单元格

    我在我的项目中使用社区版本的 ag grid 我正在尝试在每一行的一个单元格中添加菜单按钮 单击菜单按钮时 应该会弹出菜单 其中包含编辑 删除 重命名选项 并且当单击菜单上的任何项目时 我需要触发具有行值的事件 我正在尝试创建一个将显示按钮
  • 恢复console.log()

    由于某种原因 附带的原型框架 或其他 JavaScript 代码 Magento http en wikipedia org wiki Magento正在替换标准控制台功能 所以我无法调试任何内容 在 JavaScript 控制台中写下co
  • 检测 html 元素内的用户选择

    如何检测用户选择 用鼠标突出显示 是否在某个元素内 某个元素的子元素 Example div sdfsdf div some span content span div sdfsd div 伪代码 if window getSelectio
  • 如何使用Javascript统计通过ajax返回的
  • 的数量?
  • 我有一个 ajax 代码 它将列表项返回为 li one li li Two li 每次都会返回不同数量的 li 的 我想查一下数量 li li 它返回 如何使用 JavaScript 检查它 给你 returnedHTML find li
  • 将事件处理程序分配给带括号和不带括号的方法之间的区别

    假设您有以下内容 function doStuff code 2 种说法有什么区别 window onload doStuff window onload doStuff 两个语句都立即调用该方法 但如果我使用第一个语句 我可以将 onlo
  • chrome 扩展脚本在某些页面上加载两次甚至更多

    这是我的background js 文件 chrome tabs onUpdated addListener function tabId info tab var sites new Array site2 site1 var url t
  • 找到每个元素的所有父元素

    我正在尝试创建一个面包屑而不使用 url 路由提供者 并且不使用 jQuery 我有一棵这样的树 Humans Trees Animals Cats Lions Dogs Terrier Bulldog Cocker Cars 我希望当我点
  • 提交ajax表单并停留在同一页面不起作用

    我想将用户的评论存储在我的数据库中 当用户提交时 我不想将他们重定向到新页面 我有以下代码 但它不起作用 我的 HTML 代码

随机推荐

  • 如何多次从 NSHTTPCookieStorage 中清除 cookie?

    我的桌面应用程序连接到 Google App Engine 上托管的网络应用程序 一旦通过身份验证 它就会获得一个 authtoken cookie 并为所有未来的请求传递该 cookie 这一切都有效 但现在我想添加 退出 我尝试像这样实
  • 如何使用 Apache Camel 路由从授权服务器获取访问令牌?

    我有一个授权服务器 带有注释的简单类 SpringBootApplication RestController Configuration EnableAuthorizationServer oauth2 security 在端口上运行80
  • Spring 可以理解 @Inject 替换 Weld 作为 JSR-299 实现吗?

    我从几个网页中注意到 Spring 3 0 显然支持来自 JSR 330 的 Inject 由于我们确实希望在 Web 应用程序和独立应用程序的库中使用 JSR 299 语法进行依赖项注入 并且有 Weld 的替代方案 因此如果 Sprin
  • 'ExecuteReader 需要一个开放且可用的连接。连接的当前状态是打开'

    用 C 编写的相当大的 Web 应用程序不断抛出 2 个错误 ExecuteReader 需要一个开放且可用的连接 连接的当前状态是打开的 和 阅读器关闭时调用 Read 的尝试无效 这些错误是零星的 过去页面在大约 95 的情况下加载良好
  • ImportError:从其他 Python 脚本调用时没有名为 xmltodict 的模块

    我有一个奇怪的问题 我使用的是 Py2 7 我正在从 python 脚本调用 py 文件 下面是我的代码 调用者 py import os import subprocess filename file py data aXD output
  • std::ofstream 对象无法正常关闭的任何原因?

    我注意到在我的 C 代码中 每当我关闭一个std ofstream对象我无法重新打开我关闭的文件std ifstream std ifstream s open功能总是会失败 我可以做些什么来确保我的 std ofstream 对象正确关闭
  • Android 视频循环缓冲区与声音

    我正在使用谷歌的开源示例 Grafika https github com google grafika 我正在使用它ContinuousCaptureActivity java https github com google grafik
  • bash 递归xtrace

    有没有办法运行 bash 脚本 X 以便如果 X 调用可执行 bash 脚本 Y 则 Y 以 sh eux 开头 X sh Y sh Y sh bin sh echo OK 可以通过导出子 shell 使用父 shell 中设置的相同 sh
  • 重新排列 numpy 数组

    我正在尝试 就地 修改 numpy 数组 我感兴趣的是就地重新排列数组 而不是 return ing 数组的重新排列版本 这是一个示例代码 from numpy import def modar arr arr arr 1 0 commen
  • 为什么路径压缩不会改变 UnionFind 中的排名?

    我正在研究 UnionFind 的实现 并从这里进行排序和路径压缩http en wikipedia org wiki Disjoint set data struct Disjoint set forests http en wikipe
  • postgres - 错误:运算符不存在

    再说一次 我有一个在本地运行良好的函数 但是将其转移到网上会产生一个很大的错误 从有人指出我传递的参数数量不准确的响应中得到提示 我双重 在这种情况下检查以确保我向函数本身传递了 5 个参数 Query failed ERROR opera
  • dyld:找不到符号:_kABPersonAddressCityKey XCODE 8 问题

    你好 我的代码在 xcode 中完美运行7 x x 当我更新我的 xcode 时 我遇到了这个问题 请给我解决方案 细节 dyld 未找到符号 kABPersonAddressCityKey 引用自 var containers Bundl
  • 通过 Google HTTP 客户端向 Box API 发出多部分请求

    我正在尝试调用这个特定方法http developers box com docs files upload a file http developers box com docs files upload a file在 Google H
  • 熊猫 groupby 到 to_csv

    想要将 Pandas groupby 数据帧输出到 CSV 尝试了各种 StackOverflow 解决方案 但都没有奏效 Python 3 6 1 熊猫0 20 1 groupby 结果如下所示 id month year count w
  • 如何确定子字符串是否在不同的字符串中[重复]

    这个问题在这里已经有答案了 我有一个子字符串 substring please help me out 我还有另一个字符串 string please help me out so that I could solve this 我如何找到
  • FFT 的功率谱密度

    我有一段代码可以获取部分信号的 FFT 现在我正在尝试获取 PSD Fs 44100 cj sqrt 1 T 6 dt 1 Fs left test 1 right test 2 time 45 interval 636 w range t
  • 如何更改ComboBox所选项目的前景色?

    是否可以更改所选 不在下拉列表中 项目的外观 combobox ForeColor 仅更改下拉列表中所有项目的文本颜色 Edit 变体如下 我们的是 public static void CBoxDrawItem object sender
  • 如何强制网络浏览器不缓存图像

    背景 我正在为两个公益网站编写并使用一个非常简单的基于 CGI Perl 的内容管理工具 它为网站管理员提供了事件的 HTML 表单 他们可以在其中填写字段 日期 地点 标题 描述 链接等 并保存 在该表格上 我允许管理员上传与该活动相关的
  • 将图像缩略图上传到服务器,而不上传整个图像

    据我所知 我在这里问的是不可能的 但我想无论如何我都会问 以防我遗漏了什么 假设您想让用户上传 JPG 图像 并且这些图像被缩放为较小的图标 并且原始图像始终被丢弃并且不再需要 有没有什么方法可以在大多数现代浏览器中普遍使用 让用户选择硬盘
  • 如何在React-Native中选择ListView的一项?

    我是 React Native 的新手 我想使用 ListView 选择一项 当我第一次按下 item 时 ListView renderRow 被调用 但终究不起作用 我该如何修复这个错误 我的问题出在哪里 我写了一个演示here htt