Question

我有一个带有搜索功能的单位列表。在下一步中，我希望在按项目时发生某些事情。我面临着TouchableOpacity可见的问题，但是按下它时什么也没发生。我已经尝试过使用Button进行相同的操作，并且遇到相同的问题。

当按下某些东西时，它不会被调用onPress，而是在屏幕立即加载后以某种方式被调用。例如，如果我使用console.log（item.title），我会在控制台日志中获得当前在列表中的所有标题。

我试图弄清楚是什么原因导致了很多个小时，但似乎找不到任何原因。非常感谢您的帮助。

我有一个填充有数据的Flatlist，设置如下：

         return (
          <View style={styles.list}>
            <FlatList
              data = {this.state.data}
              renderItem={renderListItem}
              keyExtractor={item => item.id}
              ListHeaderComponent={this.renderHeader}
              
            />
     
          </View>
        );
      }
    }
    
    
       const renderListItem = (item) => {
        return (
        
          <MyTouchable
            id={item.item.id}
            title={item.item.title}
      
         
          />
        );
      }

MyTouchable组件看起来像这样：

          <View>
       <TouchableOpacity onPress={console.log("Pressed")}>
      <View style={styles.mainView}>
      <View>
       <Text style={styles.text}>{props.id} {props.title}</Text> 
    
       
       </View>
  
      
      </View>
    </TouchableOpacity>
     </View>

Answer 1

尝试在箭头功能内传递console.log

<TouchableOpacity onPress={() => console.log("Pressed")}>
 ...
</TouchableOpacity>

Answer 2

您不能这样写：if( i == list.lenght-1) return //Cut the execution.。您应该这样写：<Component makeThing={myFunc()} />（如果您不使用<Component makeThing={() => myFunc()} />。

确保阅读关于将函数传递给组件的docs。您必须提供和箭头函数，并在其中调用函数。或仅使用useCallback钩子：

useCallback

加载Flatlist时会调用onPress of TouchableOpacity

2 个答案: