Question

我使用FlatList来显示数据中的标题。我为TouchableOpacity添加了FlatList。因此，例如，当我单击“第一个”时，我想显示“心情”中的数据，它将显示passionate,rousing和自信列表。我想在新文件/屏幕上显示列表，并纯粹显示列表的心情。

这是我的数据

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'}
],

这是我的FlatList代码：

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>
      );
    }
  }

当单击标题时要显示心情名称时，该如何使用TouchableOpacity？

这是我的样式代码

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',
},
});

Answer 1

您应按以下步骤修改代码：

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>
    );
  }
}

Answer 2

您可以设置一个状态变量，只要按下TouchableOpacity就会更新该状态变量。然后，您有条件地呈现标题或心情名称列表：

  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})
    }
  }

Answer 3

使用它，对您来说应该没问题：

链接：https://github.com/oblador/react-native-collapsible

链接：https://github.com/naoufal/react-native-accordion

链接：https://github.com/cuiyueshuai/react-native-expandable-section-flatlist

Answer 4

您可以通过分离显示在列表中的数据源来做到这一点。

首先显示标题：您可以执行以下操作

export default class Cluster1 extends Component {
    state = {
        data: []
      };

      componentWillMount() {
        const titles = Mock.forEach(data => data.title);
        this.setState({
          data: titles
        });
      }

      onItemClick = item => {
        const itemIndex = Mock.findIndex(data => (
          data.title === item
        ));

        const values = Mock[itemIndex].mood;

        this.setState({
          data: values
        });
      };

      render() {
        return (
          <View>
            <FlatList
              data={this.state.data}
              renderItem={({ item, index }) => {
                return (
                  <FlatListItem
                    item={item}
                    index={index}
                    onItemClick={this.itemClick}
                  />
                );
              }}
            />
          </View>
        );
      }
    }

，然后在您的FlatlistItem代码中：

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

反应本机FlatList可触摸不透明度

4 个答案: