如何在按下按钮时显示react-native-push-notification popup？

Question

我是一个新的react native和学习react-native-notification-popup的人。我需要一点帮助。在我的应用程序中，当屏幕打开时，componentDidMountFunction会显示通知。我想创建一个按钮，当按下按钮时，通知应该会显示出来。代码如下：

const renderCustomPopup = ({ appIconSource, appTitle, timeText, title, body }) => (
  <View>
    <Text>{title}</Text>
    <Text>{body}</Text>
    <Button title='My button' onPress={() => console.log('Popup button onPress!')} />
  </View>
);
export default class MyApp extends Component {
  componentDidMount() {
    this.popup.show({
      onPress: function() {console.log('Pressed')},
      appIconSource: require('./assets/icon.png'),
      appTitle: 'Some App',
      timeText: 'Now',
      title: 'Hello World',
      body: 'This is a sample message.\nTesting emoji ?',
      slideOutTime: 5000
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <NotificationPopup
          ref={ref => this.popup = ref}
          renderPopupContent={renderCustomPopup}
          shouldChildHandleResponderStart={true}
          shouldChildHandleResponderMove={true} />
      </View>
    );
  }
}

我想要的是：

export default class AddProfile extends Component {
    //...
    render() {    
    return (
      <View style={styles.container}>
        <TouchableOpacity 
          style={styles.btn}
          onPress={() => 
            //how to show same notification on onPress
            }
          >
          <Text style={styles.loginText}>Show Notification</Text>
        </TouchableOpacity>
      </View>

    );
  }
}

Answer 1

只需重命名您的componentDidMount函数并将其命名为onPress。喜欢

showPopUp= () => {
    this.popup.show({
      onPress: function() {console.log('Pressed')},
      appIconSource: require('./assets/icon.png'),
      appTitle: 'Some App',
      timeText: 'Now',
      title: 'Hello World',
      body: 'This is a sample message.\nTesting emoji ?',
      slideOutTime: 5000
    });
  }

并这样调用它: onPress={() => this.showPopUp()}将您的类修改为

export default class AddProfile extends Component {
    //...
    render() {    
    return (
      <View style={styles.container}>
    <NotificationPopup
          ref={ref => this.popup = ref}
          renderPopupContent={renderCustomPopup}
          shouldChildHandleResponderStart={true}
          shouldChildHandleResponderMove={true} />
        <TouchableOpacity 
          style={styles.btn}
          onPress={() => this.showPopUp()
            }
          >
          <Text style={styles.loginText}>Show Notification</Text>
        </TouchableOpacity>
      </View>

    );
  }
}