Компонентная функция не может распознать этот оператор в реагировать родной

Question

По сути, я хочу вызвать функцию (метод класса) изнутри functionComponent в Reaction-native. Только так, как я могу сделать это, передавая в качестве реквизита, как показано в примере B (изображение с информацией отладки). Я хочу попробовать это, как в примере A (изображение с информацией отладки); Есть ли способ достичь этого (не используя реквизит)? Или есть целый другой способ сделать это, любые предложения или советы или хитрости были бы хорошими. Или я что-то упускаю.

Код для примера A.

//Example A
import React from 'react';
import { Text, View, Button } from 'react-native';

export default class RegisterScreen extends React.Component{
    state = { message: "state message"};

    openDialog(){
        alert("hello..");
    }

    funcComponent({text}){
        console.log(this);
        console.log(this.state.message);

        return(
            <View>
                <Text>{text}</Text>
                <Button onPress={()=> this.openDialog()} title="Open"/>
            </View>
        );
    }

    render(){
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <this.funcComponent text="hello from component." />
            </View>
        );
    }
}

Пример A Изображение отчета об отладке

Код для примера B

//Example B
import React from 'react';
import { Text, View, Button } from 'react-native';

export default class RegisterScreen extends React.Component{
    state = { message: "state message"};

    openDialog(){
        alert("hello..");
    }

    funcComponent({text, openDialog, context}){
        console.log(context);
        console.log(context.state.message);
        return(
            <View>
                <Text>{text}</Text>
                <Button onPress={()=> openDialog()} title="Open"/>
            </View>
        );
    }

    render(){
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <this.funcComponent text="hello from component." openDialog={this.openDialog} context={this} />
            </View>
        );
    }
}

Пример B Изображение отчета об отладке

Редактировать: ОК в основном проблема с компонентом, мы не можем просто использовать оператор "this" внутри компонента функции coz, который мы используем в <this.funcComponent> (в Примере A), поэтому нам нужно передать это оператор как реквизит (что сделано в примере B). В примере A оператор "this" находится вне области действия , поэтому мы должны передавать его как реквизиты.

Надеюсь, что это полезно для других, кто сталкивается с этой проблемой.

Редактировать 2: Решение для того, что я ищу

Я нашел новое решение для используя оператор "this" внутри метода или функции, чтобы использовать этот оператор, нам нужно создать функцию стрелки, которая делает функцию внутри области видимости класса.

(в основном это ловушка ES6) ссылка: @doppio реагировать на встроенную навигацию по спискам

код для примера C

//Example C
import React from 'react';
import { Text, View, Button } from 'react-native';

export default class RegisterScreen extends React.Component{
    state = { message: "i m state message"};

    openDialog(){
        alert("hello..");
    }

    funcComponent=({text}) => {
        console.log(this);
        console.log(this.state.message);

        return(
            <View>
                <Text>{text}</Text>
                <Button onPress={()=> this.openDialog()} title="Open"/>
            </View>
        );
    }

    render(){
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <this.funcComponent text="hello from component." />
            </View>
        );
    }
}