React Native - 從作為道具傳遞的 function 調用方法

Question

我正在使用一個名為react-native-linkedin的庫，該庫提供了一個選項來覆蓋名為 renderButton() 的方法，以創建觸發登錄過程的按鈕。

現在我需要在 class LinkedInModal 中調用 open 方法，這個 class 與接收 renderButton 作為 prop 的方法相同。

如何從我的 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>
)