在ListView - React本机中打开和关闭一个可展开项

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

class ExpandableListView extends Component {
  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      dataSource: ds.cloneWithRows(props.data),
      expandedRow: null,
    };
  }

  renderRow(rowData, sectionID, rowID) {
    const { expandedRow } = this.state;
    const isExpanded = expandedRow === rowID;

    return (
      <View>
        <TouchableOpacity onPress={() => this.toggleRow(rowID)}>
          <Text>{rowData.title}</Text>
        </TouchableOpacity>
        {isExpanded && (
          <View>
            <Text>{rowData.description}</Text>
          </View>
        )}
      </View>
    );
  }

  toggleRow(rowID) {
    const { expandedRow } = this.state;
    const isExpanded = expandedRow === rowID ? null : rowID;

    this.setState({ expandedRow: isExpanded });
  }

  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData, sectionID, rowID) => this.renderRow(rowData, sectionID, rowID)}
      />
    );
  }
}

export default ExpandableListView;

import React, { Component } from 'react';
import { View } from 'react-native';
import ExpandableListView from './ExpandableListView';

const data = [
  { title: 'Item 1', description: 'Description 1' },
  { title: 'Item 2', description: 'Description 2' },
  { title: 'Item 3', description: 'Description 3' },
];

class App extends Component {
  render() {
    return (
      <View>
        <ExpandableListView data={data} />
      </View>
    );
  }
}

export default App;