Проходя навигацию как опора

Question

В React Native, когда я использую createStackNavigator, как я могу передать navigate в качестве реквизита?

• В следующем примере itemsработает нормально, но navigate это undefined при передаче на MyList.

• Это означает, что нажатие кнопки вызывает ошибку: undefined is not a function(evaluating 'navigate('ItemDetails', { itemId: item.id })').

• Как передать navigate на MyList?

---

export class MyScreen extends React.Component {
    render() {
        const { items }  = this.props;
        const { navigate } = this.props.navigation;
        console.log(navigate); // this logs [Function anonymous] :)
        return (
            <View>
                <MyList items={items} navigate={navigate} />
            </View>
        );
    }
}

const MyList = ( { items }, { navigate } ) => {
    console.log(navigate); // this logs undefined :(
    return (
        <ScrollView>{ 
            items && items.map( item => 
                <View key={item.id}>
                    <TouchableOpacity onPress={ () =>
                        navigate( 'ItemDetails', { itemId: item.id } )
                    }>
                        <Text>Go</Text>
                    </TouchableOpacity>
                </View>
        )}</ScrollView>
)}

PS: Если бы я переместил весь код из MyList непосредственно в MyScreen, он бы работал нормально.

Answer 1

Вы должны изменить объявление MyList на

const MyList = ( { items, navigate } ) => {...}

Поскольку MyList является функциональным компонентом, любые пропущенные ему реквизиты будут доступны в качестве первого параметра.Я просто использую деструктуризацию объекта, чтобы получить необходимые свойства от этого объекта.

Вместо передачи navigate в качестве реквизита в MyList, вы также можете обернуть компонент, используя withNavigation, взгляните надокумент здесь .Если вы оберните его, используя withNavigation, вы можете напрямую получить доступ к объекту навигатора из props.

Надеюсь, это поможет!