如何在ListView中选择具有节标题的项目React Native

Question

我尝试使用设置为字母的Section标头实现分组联系人。使用一个简单的列表（没有部分标题）我可以选择一个联系人，但我似乎无法使用部分标题。

class ContactsView extends React.Component{
  constructor(props) {
    super(props);
    this.checkContact = this.checkContact.bind(this);
    this.renderSectionHeader =  this.renderSectionHeader.bind(this);
    this.toArray = this.toArray.bind(this);

    let contacts = this.props.contacts || [];
    let ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
    });
    this.state = {
      contacts:contacts,
      dataSource:ds
    }
  }

  componentDidMount() {
    ToastAndroid.show('Component will did mount', ToastAndroid.SHORT);
    this.setState({
      dataSource: this.state.dataSource.cloneWithRowsAndSections(this.state.contacts)
    });
  }

  componentWillMount(){
    //Clear the selected invitees.
    ToastAndroid.show('Component contacts did mount', ToastAndroid.SHORT);
  }

  componentWillUpdate(){
    //Check if there are selected contacts and update invitees.
    //this.invitees = this.getInvitees();
    ToastAndroid.show('Component will update', ToastAndroid.SHORT);
  }

  onLoadMore(){
    return;
  }

  renderContact(item,sectionID, rowID){
    let icon = <Icon name="check-box-outline-blank" size={25} style={styles.checkIcon} color="#83D8F8" />;

    if(item.checked)
      icon = <Icon name="check-box" size={25} style={styles.checkIcon} color="#4ABF30" /> 

    let avatar = <Image styleName="small-avatar" style={styles.avatar} source={{uri: item.thumbnailPath}} />
    if(!item.thumbnailPath){
      avatar = <MaterialInitials style={styles.avatar} backgroundColor={item.color} color={'white'} size={40} text={item.fullName} single={false} />
    }

    if(rowID === 0){
      styles.caption['borderTopColor'] = '#fff';
    }

    //let itemIndex = 
    console.log(item.checked)
    return (
      <TouchableHighlight onPress={() => this.checkContact(item,sectionID,rowID)}>
        <Row style={styles.itemRow}>
          {icon}
          {avatar}
          <View styleName="vertical" style={styles.caption}>
            <Subtitle styleName="bold multiline" style={styles.itemTitle}>{item.fullName}</Subtitle>
            <Caption style={styles.itemPhone}>{item.phone}</Caption>
          </View>
        </Row>
      </TouchableHighlight>
    )
  }

  renderSectionHeader(sectionData, sectionID){
    return (
      <View key={sectionID} style={{marginTop:0,marginBottom:0,paddingBottom:0,paddingTop:0}}>
        <Text style={{fontFamily:'Cabin_Bold',fontSize:20,color:'#1d313c',marginLeft:11,marginBottom:10,marginTop:10}}>
          {sectionID}
        </Text>
      </View>
    ) 
  }

  checkContact(item,sectionID,id){

    let dataClone = Object.assign({},this.state.contacts);
    dataClone[sectionID][id] = { ...dataClone[sectionID][id], checked: !item.checked }

    this.setState({
      contacts: dataClone,
      dataSource:this.state.dataSource.cloneWithRowsAndSections(dataClone)
    });
    console.log(this.state.contacts);
    //this.props.dispatch(ContactsState.check(sectionID,id,item));
  }

  toArray(_Object){
   let _Array = new Array();
    for(let name in _Object){
      _Array[name] = _Object[name];
    }
   return _Array;
  }

  render() {


    return (
      <ListView 
        style={{marginBottom:0,marginTop:0,paddingBottom:0,paddingTop:0}}
        dataSource ={this.state.dataSource} 
        renderSectionHeader={this.renderSectionHeader}
        initialListSize={1}
        pageSize={10}
        scrollRenderAheadDistance ={360}
        renderRow={this.renderContact.bind(this)}
      />
    );
  }
}

export default ContactsView;

我应该可以点击该项目并勾选它。

Answer 1

一个简单的例子：

＆＃13;

＆＃13;

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

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        {
          id: 1,
          title: 'title1'
        },
        {
          id: 2,
          title: 'title2'
        },
        {
          id: 3,
          title: 'title3'
        },
      ]),
      checkedItems: {}
    };
  }
  checkMark(rowId){
    let marked = this.state.checkedItems;
    if(market.hasOwnProperty(rowId)){
     if(marked[rowId]){
      marked[rowId] = false;
     } else {
      marked[rowId] = true;
     }
    } else {
      marked[rowId] = true;
    }
    this.setState({checkedItems: marked})
  }
  renderCheckMark(rowId){
    let marked = this.state.checkedItems;
    if(marked.hasOwnProperty(rowId)){
      if(market[rowid]){
       return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  }
  renderItem(rowData){
    <TouchableOpacity
      onPress={()=>{
        this.checkMark(rowData.id)
      }}
    >
      <Text>{rowData.title} {this.renderCheckMark(rowData.id) ? 'X' : null}</Title>
    </TouchableOpacity>
  }
  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => { this.renderItem(rowData) }}
        />
      </View>
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

＆＃13;

＆＃13;

＆＃13;

如果选择了该项目，则＆＃39; X＆＃39;将在行标题后显示。