React Native-从作为道具传递的函数调用方法

Question

我正在使用一个名为react native linkedin的库，该库提供了一个覆盖名为renderButton((的方法的选项，以创建触发登录过程的按钮。

现在我需要调用一个在类LinkedInModal内部打开的方法，这个类与接收renderButton作为道具的类相同。

如何从renderButton方法调用此"打开"方法？，我试过：

LinkedInModal.open()

方法看起来像：

renderButton = () => {
return (React.createElement(TouchableOpacity, 
{ accessibilityComponentType: 'button', accessibilityTraits: ['button'], 
onPress: LinkedInModal.open() 
},
React.createElement(Text, {style: {color: "#FFF"}}, "Continue with Linkedin")));
}

并将其作为传递给组件

<LinkedInModal
clientID="..."
clientSecret="..."
redirectUri="https://www.linkedin.com/developer/apps"
onSuccess={token => this.linkedinLogin(token.access_token)}
linkText="Continue with Linkedin"
renderButton={this.renderButton}
/>

但它不起作用。

我得到的错误是：

TypeError: _reactNativeLinkedin.default.open is not a function. 
(In '_reactNativeLinkedin.default.open()', '_reactNativeLinkedin.default.open' is undefined)

Answer 1

解决方案是创建一个引用：

linkedRef = React.createRef();

然后在调用组件时，将其作为prop:传递

<LinkedInModal
ref={this.linkedRef}
clientID="..."
clientSecret="..."
redirectUri="https://www.linkedin.com/developer/apps"
onSuccess={token => this.linkedinLogin(token.access_token)}
linkText="Continue with Linkedin"
renderButton={this.renderButton}
/>

在我的自定义方法中使用它：

onPress={() => this.linkedRef.current.open()}>

Answer 2

您似乎没有正确包装Text。你能试试吗：

renderButton = () => (
<TouchableOpacity 
accessibilityComponentType="button" 
accessibilityTraits={['button']}
onPress={() => LinkedInModal.open()}>
<Text style={{color: "#FFF"}}> Continue with Linkedin </Text>
</TouchableOpacity>
)