Как использовать stackNavigation с drawerNavigation в React Native и использовать toggleDrawer () в компоненте stackNavigation

В своем проекте я использую реагирующую навигацию. Я хочу использовать навигацию по стеку при навигации по ящику. Я хочу использовать 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;

react-native reactjs javascript stack-navigator react-navigation
person seyyedmahdi    schedule 20.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Решение

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

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

Правильно.

export default RootStack;

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

Почему

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

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

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

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

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

person Jeff Gu Kang    schedule 21.09.2018
comment
Я использую this.props.navigation.toggleDrawer (), но не работаю. Я регистрирую this.props, а в объекте навигации нет toggleDrawer. Я использую darwer в качестве основного, а для экрана в darwer использую навигацию по стеку. Я думаю, что this.props.navigation имеет объект навигации по стеку. - person seyyedmahdi; 21.09.2018