Проходя навигацию как реквизит

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,

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