脚注:将Digits会话数据恢复为Javascript

嗨,您好! 我是JP,是使用Twitter的Fabric SDK和React Native的开发人员。

今天,在Twitter开发论坛上提出了一个有关从Digits取回会话数据的问题。

我之前写过一篇关于Digits和React Native入门的文章,提供了如何包装(Objective C)native Digits按钮并将其出售给React Native应用程序的快速演练。

您可能需要首先阅读……

因此,使用原始文章中详述的策略,您可以像通常在Objective C端一样轻松地访问会话数据。 但是JavaScript呢?

更新:2016年5月10日

请参阅https://github.com/JeanLebrument/react-native-fabric-digits处的@Jean Lebrument的React Native中Digits的开源实现

事件和回调

从本地获取数据到React基本上有两种方法-事件和回调。 您可以使用其中哪一个取决于您的本机组件是View还是任意Module。

如果您使用的是本机视图,并且想要在该视图上触发本机事件,则需要至少渲染一次该视图,然后事件才能起作用。

这是因为当React渲染视图时,它会为其分配一个唯一的reactTag ,并且您需要在事件有效负载中包含该reactTag,以便可以将其正确路由到相应的JavaScript组件。

另一方面,回调可以传递到您已导出到React Bridge的任何模块。

希望这是有道理的……简而言之:事件需要有reactTag,这意味着您必须首先呈现,而Callback则不需要。

好的,那么我们可以将其中哪个用作“数字”按钮? 现在让我们进行回调。 虽然如果人们感兴趣,我很乐意稍后再举一个触发本地事件的示例。 让我知道😊

DigitsManager的更改

因此,以前,上一篇文章中的Digits按钮将RCTViewManager子类化。 这意味着渲染的按钮是由DigitsKit提供的实际的,真正的本机UIButton,包装在UIView中。

实际上,我们现在将改变这种情况。 我们需要一个既可以从JavaScript调用又可以将回调函数作为参数传递的authenticate方法。

现在在我们的DigitsManager.m文件中:

  • 我们在继承RCTBridgeModule而不是RCTViewManager
  • 我们现在有一个名为didTapButton的方法,该方法接受回调
  RCT_EXPORT_METHOD(didTapButton:(RCTResponseSenderBlock)回调) 
  • 我们已经从使用buttonWithAuthenticationCompletion更改为简单的authenticateWithCompletion
  • 我们正在定义一个NSDictionary,并在didTapButton方法末尾的回调中返回它
  NSDictionary *事件= @ { 
@“ userID”:session.userID,
@“ phoneNumber”:session.phoneNumber,
};
  callback(@ [[NSNull null],events]); 

除了RCT_EXPORT_METHOD,这里没有其他特别喜欢的东西。 结合子类RCTBridgeModule,这将使我们可以像使用任何其他方法一样从JavaScript调用此方法。

输入到事件字典中的实际数据可以是您想要的任何数据。 在这里,我仅包含userID和phoneNumber,但可以包含Digits会话中的任何其他属性。

数字登录更改

从使用RCTViewManager到RCTBridgeModule的部分更改意味着我们不再导出DigitsKit提供的本机UIButton。

但这没关系-我们仍然可以访问共享的Digits会话(sharedInstance),现在我们可以随意按自己的方式自定义按钮。 因此,例如,如果需要,我们现在可以将其制作为图像。

因此,在JavaScript方面,我们需要导入几个额外的项,包括TouchableHighlight,因为我们现在需要手动构建按钮。 我们的渲染方法如下所示:

  render(){ 
返回


使用我的电话号码


}

_onPressButton方法如下所示:

  _onPressButton(){ 
var DigitsManager = NativeModules.DigitsManager;
DigitsManager.didTapButton((错误,事件)=> {
如果(错误){
console.error(错误);
}其他{
console.log(事件);
}
});
}

漂亮又简单!

包起来

总结一下,我们已经

  • 更改了本机代码,使其仅在调用didTapButton时触发身份验证,而不呈现UIButton
  • 更改了我们的JavaScript代码以处理渲染TouchableHighlight并在导出的本机模块上调用didTapButton
  • 建立了会话数据的NSDictionary并将其通过回调函数传递回JavaScript