React Native 单击平面列表中的监听程序

uhry853o  于 2022-12-14  发布在  React
关注(0)|答案(6)|浏览(131)

如何在Flatlist中添加click侦听器?
我的代码:

renderItem({item, index}){
    return <View style = {{
    flex:1,
    margin: 5, 
    minWidth: 170, 
    maxWidth: 223,
    height: 304,
    maxHeight: 304,
    backgroundColor: '#ccc',
    }}/>
}
render(){
return(<FlatList
contentContainerStyle={styles.list}
data={[{key: 'a'}, {key: 'b'},{key:'c'}]}
renderItem={this.renderItem}
/>);
}
}

更新1:我使用了按钮,但是它在Flatlist中不工作。但是只使用按钮而不是Flatlist,它工作了。为什么它在Flatlist renderItem中不工作?

_listener = () => {
    alert("clicked");
}

renderItem({item, index}){
    return<View>
      <Button
          title = "Button"
          color = "#ccc"
          onPress={this._listener}
      />
    </View>
}
zphenhs4

zphenhs41#

我使用了TouchableWithoutFeedback。为此,您需要将所有renderItem元素(即您的行)添加到TouchableWithoutFeedback中。然后添加onPress事件并将FaltList项传递给onPress事件。

import {View, FlatList, Text, TouchableWithoutFeedback} from 'react-native';

render() {

  return (

      <FlatList style={styles.list}

          data={this.state.data}

          renderItem={({item}) => (

              <TouchableWithoutFeedback onPress={ () => this.actionOnRow(item)}>

                  <View>
                     <Text>ID: {item.id}</Text>
                     <Text>Title: {item.title}</Text>
                  </View>

             </TouchableWithoutFeedback>

         )}
      /> 
   );
}

actionOnRow(item) {
   console.log('Selected Item :',item);
}
r3i60tvu

r3i60tvu2#

您需要将row元素(在renderItem方法中) Package 在<TouchableWithoutFeedback>标记中。TouchableWithoutFeedback将onPress作为它的prop,您可以在其中提供onPress事件。
对于TouchableWithoutFeedback,请参考此link

qaxu7uf2

qaxu7uf23#

我用了TouchableOpacity,效果很好。这会给予你点击反馈。这是TouchableWithoutFeedback不会提供的。我做了以下操作:

import { View, Text, TouchableOpacity } from "react-native";

_onPress = () => {
     // your code on item press
  };

render() {
   <TouchableOpacity onPress={this._onPress}>
      <View>
        <Text>List item text</Text>
      </View>
   </TouchableOpacity>
}
bjg7j2ky

bjg7j2ky4#

如果您遇到平面列表行第一次单击问题,请将以下属性添加到平面列表
禁用滚动视图全景响应程序= {true}

ruarlubt

ruarlubt5#

Pressable组件现在优先于TouchableWithoutFeedback(和TouchableOpacity)。根据TouchableWithoutFeedback的React Native文档:
如果您正在寻找一种更广泛和面向未来的方式来处理基于触摸的输入,请查看Pressable API。
实施示例:

import { Pressable } from "react-native";

render() {
  return(
    <FlatList
      contentContainerStyle={styles.list}
      data={[{key: 'a'}, {key: 'b'}, {key:'c'}]}
      renderItem={({item}) => (
        <Pressable onPress={this._listener}>
          // BUILD VIEW HERE, e.g. this.renderItem(item)
        </Pressable>
      )}
    />
  );
}

参考文献

  1. TouchableWithoutFeedback(响应本机):https://reactnative.dev/docs/touchablewithoutfeedback
  2. Pressable(响应本机):https://reactnative.dev/docs/pressable
dbf7pr2w

dbf7pr2w6#

你不需要将可触摸的相关组件添加到你的平面列表renderItem中。2只需将onTouchStart属性传递给你的平面列表。
在实施例中:

<FlatList
  style={themedStyles.flatListContainer}
  data={translations}
  renderItem={renderItem}
  keyExtractor={(item, index) => `${item.originalText}____${index}`}
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={false}
  ListEmptyComponent={renderEmptyListComponent}
  onTouchStart={onBackgroundPressed}
/>

相关问题