Проблема при передаче this.props.navigation дочерним компонентам - PullRequest
Новая
       1

Проблема при передаче this.props.navigation дочерним компонентам

0 голосов
/ 16 октября 2019

У меня возникли небольшие проблемы с доступом к this.props.navigation.navigate на дочерних страницах ViewPager. У меня есть страница, на которой есть кнопка «Детали», и после ее нажатия она должна открыть новое отдельное представление (например, новое намеренное действие).

Структура: Страница входа -> нажмите «войти»Кнопка -> открывает MainPage с пользовательским CustomBottomNavigationBar с компонентом ViewPager, который берет {Object} из 5 различных страниц и отображает их следующим образом:

В корневом App.js я уже определил эту конфигурацию: 

// App.js

import MainPage from './views/mainpage';
import PageOne from './views/pageoneview';
import PageTwo from './views/pagetwoview';
import PageOneDetailView from './views/PageOneDetailView';

const MainNavigator = createStackNavigator({
  Home: {screen: MainPage},
  PageOne: {screen: PageOne},
  PageTwo: {screen: PageTwo},
  PageOneDetailView: {screen: PageOneDetailView}
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 });


// mainpage.js


import React, { Component } from 'react';
import { 
    StyleSheet,
    Image,
    View,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
import PageOne from './homepages/pageoneview';
import PageTwo from './homepages/pagetwoview';
import CustomBottomNavigationBar from './../components/CustomBottomNavigationBar';

export default MainPage extends Component {

constructor(props) {
  super(props);
}

screens = () => {
  return {
    p1: {page: <PageOne/>},
    p2: {page: <PageTwo/>}
  }
}

render() {
        return (
            <CustomBottomNavigationBar
                screensets={this.screens()}
            />
        );
    }
}

Теперь в PageOne.js есть кнопка «Детали», и при нажатии она должна открыть новый PageOneDetail.js 

// pageoneview.js


import React, { Component } from 'react';
import { 
    StyleSheet,
    Image,
    View,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
import PageOneDetail from './homepages/PageOneDetailView';

export default PageOne extends Component {

constructor(props) {
  super(props);
}

OpenView = (navigateObject, whichScreen) => {
        navigateObject(whichScreen);
}

render() {
  const {navigate} = this.props.navigation;

        return (
            <View style={{ flex: 1, alignSelf: 'flex-end' }}>
              <TouchableOpacity onPress={() => this.OpenView(navigate, 'PageOneDetailView')}>
                <Text> Details </Text>
              </TouchableOpacity>
            </View>
        );
    }
}

Ошибка, которую я получаю при приземлениина главной странице: undefined is not an object this.props.navigation.navigate когда mainpage.js пытается загрузить pageoneview.js

Пожалуйста, помогите мне понять, как решить эту проблему, с которой я столкнулся весь день.

Спасибо.

1 Ответ

2 голосов
/ 16 октября 2019

Пропеллер navigation доступен только экранам, но не дочерним элементам этих экранов. Вы можете передать навигацию от родителя или использовать withNavigation HOC или useNavigation ловушку от react-navigation-hooks, чтобы получить к ней доступ повсюду.

...