React Native FlatList 可触摸不透明度

Posted 2023-02-16

【中文标题】React Native FlatList 可触摸不透明度

【英文标题】：React Native FlatList Touchable Opacity

【发布时间】：2018-11-29 08:04:20

【问题描述】：

我使用FlatList 来显示数据中的标题。我在TouchableOpacity 中添加了FlatList。例如，当我点击“First”时，我想显示“mood”中的数据，它将显示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',
,
);

【问题讨论】：

你能上传你的风格代码吗？

我刚刚上传了。

【参考方案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>
    );
  

【参考方案2】：

使用这个，它应该适合你：

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

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

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

【参考方案3】：

您可以设置一个状态变量，该变量会在您按下 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)
    
  

【讨论】：

如果我想在新屏幕上显示平面列表怎么办？那会奏效吗？就像每当我按下 TouchableOpacity 时，会弹出一个新屏幕并显示情绪名称列表。

我编辑了我的答案，当点击 TouchableOpacity 时列表项会展开

您的视图有错误。有7个视图！错误低于 this.state.collapsed ?

不，它实际上是正确的。当状态被折叠时，它是一个自关闭的 View 标签（实际上什么都没有），或者是情绪列表。

这部分没有右括号 this.state.collapsed ? .这是他们告诉我的错误。

【参考方案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>
      );
   

【讨论】：

没有错误但也没有输出。这只是一个空白屏幕