Question

我正在尝试在本机反应中构建FlatList。我遇到的问题是使用onPress道具，并试图使其与FlatList一起使用。问题在于，将为列表中的每个项目（而不是我专门按的项目）击打onPress。

这是我组件中的Flatlist：

           <FlatList
              data = {this.state.dataSource}
              renderItem = {({item}) => <PickerBox title = {item.c_syn_name} onPress = {this._onPress(item.c_syn_name)} />}
              keyExtractor = {(item, index)=> item.c_syn_name}
              backgroundColor = "thistle"

            />

这是PickerBox组件：

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: "row",
        padding: 10,
        marginLeft: 16,
        marginRight: 16,
        marginTop: 8,
        marginBottom: 8,
        borderRadius: 5,
        backgroundColor: "slategrey",
        elevation: 2
      },
      shadow: {
        flex: 1,
        flexDirection: "row",
        padding: 0,
        marginLeft: 16,
        marginRight: 16,
        marginTop: 8,
        marginBottom: 8,
        borderRadius: 5,
        backgroundColor: "darkslategray",
        elevation: 2
      },
      title: {
        fontSize: 16,
        color: "#000"
      },
      container_text: {
        flex: 1,
        flexDirection: "column",
        marginLeft: 12,
        color: "#FFF"
      },
      description: {
        fontSize: 11,
        fontStyle: "italic"
      }
    });

    class PickerBox extends Component<props> {
      render() {
        const { title } = this.props;
        return (
          <View style={styles.shadow}>
            <View style={styles.container}>
              <Text
                style={styles.container_text}
                onPress={() => this.props.onPress}
              >
                {title}
              </Text>
            </View>
          </View>
        );
      }
    }
    export default PickerBox;

这是我的onPress函数，它位于包含我的列表的组件中，并通过props函数中的PickerBox传递：

    _onPress = newName => {
        this.setState({ newTaxon: newName });
        Alert.alert("New Taxon: "+this.state.newTaxon.toString());
    };

行为是Alert会出现在每个列表项上，而只出现在我特别按下的项目上。

Answer 1

您正在此行上的onPress中立即调用renderItem回调：

onPress = {this._onPress(item.c_syn_name)}

，这意味着onPress得到_onPress的结果。这就是为什么您每次都会看到该警报弹出窗口的原因。您需要为onPress提供要调用的功能。一种简单的实现方法是执行以下操作：

onPress={() => this._onPress(item.c_syn_name)}

通过将其包装在箭头函数中，_onPress不会在呈现FlatList时立即被调用。值_onPress现在是它可以调用的函数。

Answer 2

const Main = () => {
    <FlatList
       data={[
          {id: 1, title: one},
          {id: 2, title: two}
         ]}
       keyExtractor={(item) => item.id.toString()}
       renderItem={({item}) => (
          <Card 
           onPress={() => your_function()}
           title={item.label}
          />
        }
     />
 }



const card = (onPress) => {
    <View onPress={onPress}>
      <Text>Hello</Text>
    </View>
}

如何在单位列表中使用onPress

2 个答案: