Вызов onPress для пользовательского компонента в React Native

Question

Как это решить? У меня есть пользовательский компонент Button, который включается в мой ModalScreen. Кажется, все работает, но функция onPress работает. Кажется, по какой-то причине он потерял область видимости, поэтому я не могу ссылаться на this или даже добавлять параметры в функцию. Что мне здесь не хватает?

import React from 'react';
import {
  Text,
  View,
} from 'react-native';

import Styles from 'app/constants/Styles';
import Button from 'app/components/Button';

export default class ModalScreen extends React.Component {

    onBtnPress() {
        console.log('dfsdfsdf'); /// << this gets consoled out just fine
        //this.props.navigation.navigate('Main'); <<<< this won't work
    }

    render() {
        return (
            <View style={Styles.center}>

                <Text>MOdalScreen</Text>
                <Button label='Gå vidare' onPress={ this.onBtnPress }/>

            </View>
        );
    }
}

Button.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';


import Styles from 'app/constants/Styles'
import Vars from 'app/constants/Vars'


export default class Button extends Component {

    render() {
        return (
            <TouchableOpacity style={[Styles.round, Styles.primaryBackground]} onPress={this.props.onPress}>
                <Text style={[Styles.label, Styles.textCenter, { margin: Vars.spacing.narrow }]}>
                    {this.props.label}
                </Text>
            </TouchableOpacity>
        )
    }
}

Answer 1

Вы правы, что он потерял сферу. Вам просто нужно как-то привязать область видимости к функции handle, прежде чем передать ее компоненту Button. Одним из популярных способов является удобная функция стрелки:

<Button label='Gå vidare' onPress={ () => this.onBtnPress() }/>

Или вы можете использовать bind в конструкторе:

export default class ModalScreen extends React.Component {
    constructor(props) {
        super(props);
        this.onBtnPress = this.onBtnPress.bind(this)
    }

    onBtnPress() {
        console.log('dfsdfsdf'); /// << this gets consoled out just fine
        //this.props.navigation.navigate('Main'); <<<< this won't work
    }