Question

我正在React Native中创建一个聊天应用程序，该应用程序接收不同的“消息类型”作为响应。其中一个包含一组按钮，这些按钮我目前正在组件“ ChatQuickReply”的平面列表中呈现，如下所示：

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中从绑定到平面列表的不同组件调用函数

2 个答案: