如何从绑定到 React Native 中的 flatlist 的不同组件调用函数

Question

我正在 React Native 中创建一个聊天应用程序，它接收不同的 "message types" 作为响应。其中一个包含我当前在组件 "ChatQuickReply" 的 Flatlist 中呈现的一组按钮，如下所示：

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

class ChatQuickReply extends React.Component {
  constructor(props) {
    super(props);
  }

  renderItem({ item }) {
    return (
      <TouchableOpacity onPress={this._onPressQuickReply}>
        <View style={styles.quickButton}>
          <Text style={styles.quickButtonText}>{item.title}</Text>
        </View>
      </TouchableOpacity>
    );
  }

  _onPressQuickReply = () => {
    alert(Hello);
  };

  render() {
    return (
      <View>
        <FlatList
          data={this.props.buttons}
          keyExtractor={(item, index) => "key" + index}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

我在另一个组件中渲染这个组件，也在一个工作正常的 Flatlist 中。

问题是，我无法调用分配给 TouchableOpacity 的函数。如何从不同的组件调用此函数？

Answer 1

我认为，您可以尝试为您的 TouchableOpacity 组件触发 onPress 事件。

你需要参考。

ref={touchableOpacity => this._touchableOpacity = touchableOpacity}

然后当你想在不点击的情况下启动 onPress 时，只需调用

this._touchableOpacity.touchableHandlePress();

Answer 2

根据两个组件之间的关系，如果ChatQuickReply回复是父组件，您可以将子组件中的功能作为道具传递并调用它。

import React from "react";


class ChatQuickReply extends React.Component {

renderItem({ item }) {
  return (
     <TouchableOpacity onPress={this._onPressQuickReply}>
       <View style={styles.quickButton}>
       <Text style={styles.quickButtonText}>{item.title}</Text>
     </View>
     </TouchableOpacity>
  );
 }

_onPressQuickReply = () => {
  alert(Hello);
 };

render() {
  return (
    <View>
      <FlatList
        data={this.props.buttons}
        keyExtractor={(item, index) => "key" + index}
        renderItem={this.renderItem}
      />
      **<ChildComponent clickParentFunction={this._onPressQuickReply} />**
    </View>
  );
 }

}

class ChildComponent extends React.Component {

  onClick = () => {
     const {clickParentFunction} = this.props

     clickParentFunction() // We can call it here
  }

  // We create a trigger to the onclick
}

或者您可以将 _onPressQuicklyReply 函数带到呈现两个组件的组件并将其传入以使其更通用

import OtherComponent from './Othercomponent';

class ParentComponent {
    _onPressQuickReply = () => {
       alert(Hello);
    }

    return (
      <View>
        <ChatQuicklyReply onParentFunction={this._onPressQuickly}>
        <OtherComponent onParentFunctionCall={this._onPressQuickly} />
      </View>
    )
}

如何从绑定到 React Native 中的 flatlist 的不同组件调用函数

How to call function from different component bound to flatlist in React Native

javascript

reactjs

react-native