React Native - вызов метода из функции, переданной как prop

Question

Я работаю с библиотекой с именем act-native-linkedin , эта библиотека дает возможность переопределить метод renderButton (), чтобы создать кнопку, запускающую процесс входа в систему.

Теперь мне нужно вызвать метод open внутри класса LinkedInModal, этот класс тот же, который получает 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>
)