Реагировать на многократное использование компонента, определенного в родительском классе - PullRequest
Новая
       5

Реагировать на многократное использование компонента, определенного в родительском классе

0 голосов
/ 27 февраля 2019

Ниже приведен код для заголовка, который я определил в common.js файле: 

class HeaderStyle extends Component {
    render() {
        return (
            <Header style={{ elevation: 5 }}>
                <Left style={{ flex: 1 }}>
                    <Icon name="md-menu" size={30} onPress={() => this.props.navigation.openDrawer()} />
                </Left>
                <Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image style={{ width: 80, height: 45, }} source={require('./resources/hr-pro-logo.png')} />
                </Body>
                <Right style={{ flex: 1 }}>
                    <Icon name="md-search" size={30} onPress={() => alert('hi there')} />
                </Right>
            </Header>
        );
    }
}

А вот код для моего DashboardScreen.js: 

export default class DashboardScreen extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <HeaderStyle /> // This is where I'm using the Header imported from common.js
                <View>
                    <FlatList
                        // Code to populate my list
                    />
                </View>
            </View>
        );
    }

Мне удалось импортировать заголовок в панель инструментов, но когда я нажимаю на значок меню onPress={() => this.props.navigation.openDrawer()}, он выдает ошибку undefined is not an object (evaluating '_this.props.navigation.openDrawer')

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

FYI - Когда я использовал код заголовка непосредственно в моей панели инструментов, приложение запускалосьгладко, без ошибок.Но поскольку есть несколько экранов, где я хочу использовать заголовок, мне нужно держать его в обычном месте, чтобы избежать повторения кода.

1 Ответ

0 голосов
/ 27 февраля 2019

Вы должны передать navigation реквизит своему компоненту: 

<HeaderStyle navgation={this.props.navigation} />

. Или вы можете использовать функцию withNavigation в реагирующей навигации: 

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
    return (
    //you Header render
    );
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);

Документация здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...