Можете ли вы передавать функции между компонентами в React-Native (в разных файлах)?

Question

У меня есть класс, в котором у меня есть метод, который я хочу вызвать. В частности, () => this.props.navigation.navigate('Detail'). Сначала я использовал кнопку, прикрепленную к каждой FeedCard, для навигации, но она выглядела неаккуратно, поэтому вместо этого я выбрал сенсорную прозрачность.

HomeScreen. js

class HomeScreen extends Component {
    state = { }
    render() {
        return(
            <Root>
                <List>
                    <FeedCard />
                    <FeedCard doThis={() => this.props.navigation.navigate('Detail')} />
                    <FeedCard />
                    <FeedCard />
                    <FeedCard />
                    <FeedCard />
                    <FeedCard />
                </List>
            </Root>
        )
    }
};

Можно ли передать функции (аналогично тому, что я использовал, используя doThis() в реагировать на нативную информацию?

FeedCard. js

function FeedCard({doThis}) {
    return (
        <Root>
            <TouchableOpacity onPress={doThis}>
                <FeedCardHeader />
                <CardContainer>
                    <CardContentText>
                        {text}
                    </CardContentText>
                </CardContainer>
                <FeedCardBottom />
            </TouchableOpacity>
        </Root>
    )
};

Когда я помещаю функцию непосредственно в onPress() для <TouchableOpacity> компонент, который он возвратил TypeError: undefined is not an object (evaluating '_this.props'), поэтому я хотел знать, возможно ли вообще передать функцию, аналогичную той, которую я пытался описать выше. Но с приведенным выше кодом она вообще не перемещается. Я знаю, что навигация работает потому что, когда я помещал его в onPress() в <Button> на той же странице, что и HomeScreen, он работал нормально.

Answer 1

Передайте пустую функцию в другую Feedcard

<FeedCard doThis={() => { }} />
<FeedCard doThis={() => this.props.navigation.navigate('Detail')} />
<FeedCard doThis={() => { }} />
<FeedCard doThis={() => { }} />
<FeedCard doThis={() => { }} />
<FeedCard doThis={() => { }} />
<FeedCard doThis={() => { }} />

Если вы не хотите передавать ее. Сделайте как ниже

function FeedCard({doThis}) {
    return (
        <Root>
            <TouchableOpacity onPress={() => ÏdoThis}>
                <FeedCardHeader />
                <CardContainer>
                    <CardContentText>
                        {text}
                    </CardContentText>
                </CardContainer>
                <FeedCardBottom />
            </TouchableOpacity>
        </Root>
    )
};