Как использовать stackNavigation с boxNavigation в реагировать на нативный и использовать toggleDrawer () в компоненте stackNavigation - PullRequest
Новая
       50

Как использовать stackNavigation с boxNavigation в реагировать на нативный и использовать toggleDrawer () в компоненте stackNavigation

0 голосов
/ 21 сентября 2018

Я использую реагирующую навигацию в своем проекте.Я хочу использовать стековую навигацию в навигации по ящикам.Я хочу использовать this.navigation.toggleDrawer() на экранах навигации стека, но не добавлять это на экранах навигации стека. 

// drawer-navigation.js

import React, { Component } from 'react';
import { DrawerNavigator } from 'react-navigation';
import StackNavigation from './stack-navigation';
import Screen1 from '../screens/screen1'

const RootDrawer = DrawerNavigator({
    Home: {
        screen: StackNavigation,
    },
    screen1: Screen1

},{
    // set default screen
    initialRouteName: 'Home',
    drawerPosition: 'right'
})

export default class DrawerNavigation extends Component {
    render() {
        return (<RootDrawer />);
    }
}

// stack-navigations

import React from 'react';
import { StackNavigator } from 'react-navigation';
import Home from '../screens/home';

const RootStack = StackNavigator({
    Home: {
        screen: Home,

        navigationOptions:{
            header: null
        }
    }
},{
    // set default screen
    initialRouteName: 'Home',

    // defualt style for navigation bar
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#F55656',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
    },      
})


export default class StackNavigation extends React.Component {
    render() {
        return (<RootStack />);
    }
}

Вот мой домашний компонент, в который я хочу добавить кнопку в компонент HomeSearch, которая при нажатии открываетмой ящик, но это дает мне следующую ошибку:

this.navigation.toggleDrawer () не является функцией 

// home.js (target screen)

import React, { Component } from 'react';
import { View, StyleSheet, StatusBar } from 'react-native';
import SplashScreen from 'react-native-smart-splash-screen';

import Header from '../components/header';
import HomeSearch from '../components/homeSearch';

class Home extends Component {
    constructor(props){
        super(props);

    }


    componentDidMount(){
        // control splash screen
        SplashScreen.close({
            animationType: SplashScreen.animationType.scale,
            duration: 1500,
            delay: 1200,
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <StatusBar 
                    barStyle="light-content"
                    animated={true}
                    backgroundColor='#F55656'
                />
                <Header/>
                <HomeSearch onPress={this.navigation.toggleDrawer()}/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: 'rgba(236, 235, 231, 0.35)',

    }
})

export default Home;

1 Ответ

0 голосов
/ 21 сентября 2018

Решение

Это неправильный способ экспорта компонентов ReactNavigation.

export default class StackNavigation extends React.Component {
    render() {
        return (<RootStack />);
    }
}

Правильный путь.

export default RootStack;

Ваш RootDrawer будет использовать то же самое.И используйте onPress=this.props.navigation.toggleDrawer.

Почему

createStackNavigation и createDrawerNavigation обертывают компоненты и передают им реквизиты.

В вашем случае drawerNavigator component инъекционные реквизиты, связанные в navigation с вашим компонентом stackNavigator.Но ваш RootStack не может получить реквизит от pocketNavigator, потому что вы завернули RootStack в React Component.Вот почему это не работает хорошо.Просто экспортируйте ваши навигационные компоненты как RootStack и RootDrawer.

this.props.navigation: навигационная опора передается каждому компоненту экрана (определению) в навигаторе стека (подробнее об этом позже)в разделе «Глубина навигации»).

Пропускная способность навигации, передаваемая навигатору, включает только состояние, диспетчеризацию и addListener.Это текущее состояние навигатора и канал событий для отправки запросов действий.

Официальный документ

...