如何在 React Native 中将 Facebook Messenger "Send" 按钮导出为本机 UI 组件？

Question

我正在尝试从 Facebook Messenger 导出发送按钮作为本机 UI 组件以响应本机。我没有收到任何错误，但我也没有看到按钮。

我对此的参考是： https://facebook.github.io/react-native/docs/native-components-ios.html and https://developers.facebook.com/docs/messenger/ios#messenger_buttons

这是我目前的情况：

RCTFBMessengerButtonManager.m

#import "RCTViewManager.h"
#import <FBSDKMessengerShareKit/FBSDKMessengerShareKit.h>

@interface RCTFBMessengerButtonManager : RCTViewManager
@end


@implementation RCTFBMessengerButtonManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
  return [FBSDKMessengerShareButton rectangularButtonWithStyle:FBSDKMessengerShareButtonStyleBlue];
}

@end

FBMessengerButton.js 是我获取 Native 组件的地方：

var { requireNativeComponent } = require('react-native');

module.exports = requireNativeComponent('RCTFBMessengerButton', null);

和我实现 FBMesssengerButton 组件的发送组件：

'use strict';

var React = require('react-native');

var {
    View,
} = React;


var FBMessengerButton = require('../Components/FBMessengerButton');

class Send extends React.Component{

    constructor(props){
        super(props);
    }


    render() {
        return (
            <View>
                <FBMessengerButton />
            </View>
        );
    }
}

module.exports = Send;

Answer 1

问题不是 FB Messenger 没有出现，而是按钮的背景和大小没有传到 React Native。通过在 <FBMessenger> 组件上设置宽度、高度和背景颜色，按钮就可以了。

下一个问题与按钮上的绑定事件有关，我也已解决。

我把我的解决方案变成了一个 npm 包，可以在这里找到：https://github.com/1985media/react-native-facebook-messenger

如何在 React Native 中将 Facebook Messenger "Send" 按钮导出为本机 UI 组件？

How do I export Facebook Messenger "Send" Button as a Native UI Component in React Native?

objective-c

facebook-messenger

react-native