2. 程式人生 > >React Native之學習ListView的單選以及記錄資料

React Native之學習ListView的單選以及記錄資料

阿新 • • 發佈：2019-02-17
var mSelectWhat = -1; var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); //當且僅當cell中的任意兩行不相等時才重新渲染\ export default class Designer extends Component { constructor(props) { super(props); this.state = { isShowSearch: false, //是否顯示搜尋框 dataSource
: ds.cloneWithRows([]) }; this.checkedArr = [] } static propTypes = { //屬性 }; static defaultProps = { //屬性預設值 }; componentWillMount() { GesstDesignTeam((success) => { // 1處 服務介面獲取資料 LetAll = success.result; alert(success.result) success.result.map((o, i) => { if (!this.props.mID) { 識別第二次進來的引數是否有點選過 LetAll[i]['isCheck'] = false; } else { if (this.props.mID == o.user_id) { //判斷點選了誰 LetAll[i]['isCheck'] = true; } else { LetAll[i]['isCheck'] = false; } }
}) this.setState({ dataArr: ds.cloneWithRows(LetAll) }) }) } onBack() { if (this.props.getname) { //回撥傳值給上個頁面 this.props.getname(mSelectWhat != -1 ? LetAll[mSelectWhat] : []); } this.props.navigator.pop(); } changeSearch() { this.setState({ isShowSearch: !this.state.isShowSearch }) } renderHeadLeft() { return ( <TouchableOpacity onPress={this.onBack.bind(this)}> <Text style={{ color: '#aaa' }}>取消</Text> </TouchableOpacity> ) } ChangeCheck(item, index) { //判斷點選了誰 if (item.isCheck) { LetAll[index]['isCheck'] = false; mSelectWhat = -1; } else { LetAll.map((o, i) => { if (i == index) { LetAll[i]['isCheck'] = true mSelectWhat = i; } else { LetAll[i]['isCheck'] = false } }) } this.setState({ dataArr: ds.cloneWithRows(LetAll) }); }
renderRow(rowData, sectionID, rowID, highlightRow) { return ( <ListItem onPress={this.ChangeCheck.bind(this, rowData, rowID)} key={rowID} style={{ backgroundColor: 'white', marginLeft: 0, paddingLeft: _getWidth(15) }}> <Left > <Text style={{ lineHeight: 20 }}>{rowData.name}</Text> </Left> {rowData.isCheck && <Image style={{ width: 20, height: 20 }} source={require('../../../img/isChecked.png')}></Image>} </ListItem> ) } render() { return ( <Container style={{ backgroundColor: _backgroundColor }}> <Content> <ListView enableEmptySections={true} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} /> </Content> </Container> ); } }

相關推薦

React Native之學習ListView的單選以及記錄資料

var mSelectWhat = -1; var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }); //當且僅當cell中的任意兩行不相等時才重新渲染\ export default class Desig

react native之listview加下拉重新整理上拉分頁

直接上程式碼 var REQUEST_URL = 'xxxx&page='; import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, Text, Vie

React Native之Android 和 iOS在點選觸發事件時的相容性處理

最近，我在專案中遇到了一個bug，bug的情況描述大致如下： 當點選按鈕A時，彈出彈層，彈層有一個按鈕B，邏輯是：當點選按鈕B時，首先彈層消失，緊接著開始調取C介面流程。在Android上正確顯示，但是iOS中只是彈層消失，並沒有調取C介面事件。 對於這種情況，我之前開發過

React Native之彈框存在TextInput，輸入框有焦點情況下需要點選兩次才可觸發事件-解決

Bug情況描述：React Native專案中，點選按鈕A出現彈框浮層，彈框中需要TextInput輸入數字，鍵盤浮起來；這時候點選 取消按鈕L 或者 確定按鈕R，只是讓鍵盤收起，但是並沒有觸發 取消

React Native之ListView實現九宮格效果

概述在安卓原生開發中，ListView是很常用的一個列表控制元件，那麼React Native（RN）如何實現該功能呢？我們來看一下ListView的原始碼ListView是基於ScrollView擴充套件得來的，所以具有ScrollView的相關屬性：dataSource：

react-native 之 state 和 props 以及 redux 和 react-redux

Component 中 state 和 props 的區別； 元件Component中狀態state和屬性props的區別 state props state是在元件內部定義的一個特殊物件{}，既起到元件內部的一種快取作用，也具備由於

關於React Native 的學習之路一（環境搭建）

1:下載相關開發軟體,並配置環境  我們在RN學習之初使用 Sublime Text來編譯JavaScript程式碼，具體工具的下載地址：http://www.sublimetext.com/  環境配置如下：（1）安裝PackageControl對Sublime Text外

React-Native之ListView的3種樣式

http://www.jianshu.com/p/c52005107d81 最近在學習React-Native的ListView元件，其實ListView 相當於iOS中的tableview，當然也可以通過改變佈局來實現collectionView的樣式，和分組的tab

React-Native 之ListView

最近在摸索react-native，雖然蘋果爸爸已經在之前封殺了JSPatch，我還是抱著試一試的態度先學一個療程，畢竟，知識嘛，多學點總是好的。 其實對於js我瞭解的不多，所以一些東西給不了相應的解釋，還請見諒（ps：我的學習階段都是從模仿開始的）。後面我會

React Native之ListView的講解與應用

          在安卓原生開發中，ListView是很常用的一個列表控制元件，那麼React Native（RN）如何實現該功能呢，這裡簡單的講解下。        ListView.js原始碼截圖：               從原始碼中可知RN中的ListView是

React Native之FlatList，listview的升級版

RN的0.43版終於出來了，現在大家期待已久的listview的升級版flatlist終於跟大家見面了，我也是關注了好久哦，現在將使用說明，和例子給大家簡單的講解下。http://www.jianshu.com/p/37f7a3d4f114 簡單的講解下api： fl

一起來學習React-Native之react-navigation基本解析

前言   不久前自己也完整開發了一個React-Native專案，對其中的一些知識存在疑惑，再加上專案時間比較緊張，來不及做系統的學習。現在來回顧自己開發當中存在的疑惑點，和大家分享。第一篇是關於路由框架react-navigation,當時其實也沒有好好看文件，現在回頭看路由設計的確實比

React Native之Touchable四組件

width font clas 容易 原生 ber 支持 cit out 一、TouchableHighlight 概念： 本組件用於封裝視圖，使其可以正確響應觸摸操作。當按下的時候，封裝的視圖的不透明度會降低，同時會有一個底層的顏色透過而被用戶看到，使得視圖變暗或變亮。

React Native之登錄界面的布局

處理器 圖片 blank 轉載 圓角 print extends cit hit 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 代碼註釋比較詳細 /** * Sample React Native App * https://github.com/fa

學習15 單選框/多選框標簽

con form type code pan content 多選 span div <!doctype html> <html> <head> <meta http-equiv="content-type" content="t

React Native 繼續學習

opacity ont borde click won dbd facebook native time 下一個項目公司也打算使用react native.大致看了下原型設計,寫幾個小demo先試試水.特此記錄下. 1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支

react native進一步學習（NavigatorIOS 學習）

str 新建 title 跳轉 ios sheet fontsize font registry 特別申明：本人代碼不作為任何商業的用途，只是個人學習的一些心得，為了使得後來的更多的程序員少走一些彎路。*（如若侵犯你的版權還望見諒）*。 開發工具：WebStorm，xcod

react-native之遠程圖片修改後APP不更新

reactnative react-native react native 刷新圖片 base64今天在做客戶的項目時，有一個需求是App上要顯示遠端的圖片，而遠端的圖片有可能會更新，但圖片名不變。在react-native中，顯示圖片是用的自帶的Image組件，大家都知道react在更新組件之前都會判斷pr

使用WebStorm開發React-native之基礎

ttr regexp 渲染 hang reg 路徑 tostring png text 配置問題： （1）找不到SDK路徑，或者沒有SDK對應的版本：SDK必須是android-23才可以(更新SDK) 解決方法：環境變量，必須設置Android_HOME

react-native之模擬器調試

adb div connect oid native 令行 input 模擬 key 手動觸發搖一搖：adb shell input keyevent 82（有時模擬器搖一搖無效） android studio檢測不到模擬器： 命令行cd到模擬器安裝目錄，找到adb.exe