React Native FlatList Touchable Opacity

问题

I used FlatList to display the title that is in the data. I added in TouchableOpacity for the FlatList. So for example, when I click 'First', I want to show the the data from 'mood' and it will show the list of passionate,rousing and confident. I want to show the list on a new file/screen and show purely the mood of list.

This is my data:

const Mock = 
[
{ title: 'First', 
  mood: 
[
  {name: 'passionate'},
  {name: 'rousing'},
  {name: 'confident'},
],
},
{ title: 'Second', 
  mood: 
[
  {name: 'rollicking'},
  {name: 'cheerful'},
  {name: 'fun'},
  {name: 'sweet'},
  {name: 'amiable'},
  {name: 'natured'}
],

This is my FlatList code:

export default class Cluster1 extends Component{
    render() {

      return (
        <View>
          <FlatList
            data={Mock}
            renderItem={({ item, index }) => {
              return <FlatListItem item={item} index={index} />;
            }}
          />
        </View>
      );
    }
  }

  class FlatListItem extends Component {
    render() {
      return (
        <View style={styles.list}>
          <View>
              <TouchableOpacity>
            <Text style={styles.itemTitle}>{this.props.item.title}</Text>
            </TouchableOpacity>
          </View>
        </View>
      );
    }
  }

What should I do with the TouchableOpacity when I want to show the mood name when I click the title?

This is my style code

const styles = StyleSheet.create({  
 itemTitle:{
    fontSize: 25,
    fontWeight: 'bold',
    color: 'white',
    margin: 20,
},
},
list:{
    flex: 1,
    backgroundColor: '#00BCD4',
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
},
});

回答1:

You should modify your code as below to do this:

export default class Cluster1 extends Component {
  render() {
    return (
      <View style={{ margin: 30, backgroundColor: '#ddd' }}>
        <FlatList
          data={Mock}
          renderItem={({ item, index }) => {
            return <FlatListItem item={item} index={index} />;
          }}
        />
      </View>
    );
  }
}

class FlatListItem extends Component {
  state = { showItemIndex: [false, false] };

  _onPress = index => () => {
    let showItemIndex = this.state.showItemIndex;
    showItemIndex[index] = !this.state.showItemIndex[index];
    this.setState({ showItemIndex });
  };

  render() {
    return (
      <View style={styles.list}>
        <View>
          <TouchableOpacity onPress={this._onPress(this.props.index)}>
            <Text style={styles.itemTitle}>{this.props.item.title}</Text>
          </TouchableOpacity>
          {this.state.showItemIndex[this.props.index] && (
            <FlatList
              data={this.props.item.mood}
              extraData={this.state.showItemIndex}
              renderItem={({ item, index }) => {
                return (
                  <Text item={item} index={index}>
                    {item.name}
                  </Text>
                );
              }}
            />
          )}
        </View>
      </View>
    );
  }
}

回答2:

Use this, it's should be work fine for you:

Link: https://github.com/oblador/react-native-collapsible

Link: https://github.com/naoufal/react-native-accordion

Link: https://github.com/cuiyueshuai/react-native-expandable-section-flatlist

回答3:

You could set a state variable which gets updated whenever your TouchableOpacity gets pressed. And then you conditionally render the title or the list of mood names:

  class FlatListItem extends Component {

    constructor(props) {
      super(props);
      this.state = {collapsed: true}
    }


    render() {
      return (
        <View style={styles.list}>
          <View>
              <TouchableOpacity
                onPress={this.onPress}
              >
              <Text style={styles.itemTitle}>
                {this.props.item.title}
              </Text>
            </TouchableOpacity>
            {this.state.collapsed ? 
            <View /> : 
            <View>
              {this.props.item.mood.map(mood => <Text>{mood.name}</Text>)}
            </View>}
          </View>
        </View>
      );
    }

    onPress = () => {
      this.setState({collapsed: !this.state.collapsed})
    }
  }

来源：https://stackoverflow.com/questions/50943971/react-native-flatlist-touchable-opacity