• 1397/11/28

دو navigation Drawer :

 با سلام

در react navigation ..پیاده سازی دو دراور ...یکی از راست ودیگری از چپ چطور پیاده سازی می شود

 

  • 1397/11/28
  • ساعت 15:58

سلام دوست من

همانطور که آموزش دادم کافیه 2 تا Drawer بسازی و به یکی بگی سمت راست باشه و دیگری سمت چپ که هر کدوم تابعی دارن که وقتی صدا میشن بازشون میکنه .

برات مثال نوشتم

 

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import {
    DrawerActions,
    createStackNavigator,
    createAppContainer,
    createDrawerNavigator
} from 'react-navigation';

const HomeScreen = ({ navigation }) => (
    <View style={{ justifyContent: 'space-around', flex: 1 }}>
        <Button title="Right Drawer" onPress={navigation.toggleRightDrawer} />
        <Button title="Left Drawer" onPress={navigation.toggleLeftDrawer} />
    </View>
);

const LeftDrawer = createDrawerNavigator(
    {
        Home: HomeScreen
    },
    {
        getCustomActionCreators: (route, stateKey) => {
            return {
                toggleLeftDrawer: () =>
                    DrawerActions.toggleDrawer({ key: stateKey })
            };
        }
    }
);

const AppStackNavigator = createStackNavigator(
    {
        drawerLeft: LeftDrawer
    },
    {
        defaultNavigationOptions: {
            header: null
        }
    }
);

const RightDrawer = createDrawerNavigator(
    {
        About: AppStackNavigator
    },
    {
        drawerPosition: 'right',
        getCustomActionCreators: (route, stateKey) => {
            return {
                toggleRightDrawer: () =>
                    DrawerActions.toggleDrawer({ key: stateKey })
            };
        }
    }
);

const AppContainer = createAppContainer(RightDrawer);

export default class App extends Component {
    render() {
        return <AppContainer />;
    }
}

 


  • 1397/12/22
  • ساعت 16:06

با سلام وتشکر

من این دو دراور را در یک تب نویگیتور قرار دادم

حال روی دراور ها لینکی دارم که میخواهد به یکی از این تب نویگیتور ها برود

از کد زیر استفاده میکنم

this.props.navigation.navigate('setting');

اگر بخواهم قبل از رفتن به صفحه دراور بسته شود بایستی چه دستوری بنویسم

this.props.navigation.closeDrawer();

 this.props.navigation.closeDrawer();
this.props.navigation.navigate(item);

از این استفاده میکنم صفحه بعدی نمیره


  • 1397/12/22
  • ساعت 20:53

سلام دوست من

جواب در مثالی که نوشتم هست

const RightDrawer = createDrawerNavigator(
    {
        About: AppStackNavigator
    },
    {
        drawerPosition: 'right',
        getCustomActionCreators: (route, stateKey) => {
            return {
                toggleRightDrawer: () =>
                    DrawerActions.toggleDrawer({ key: stateKey })
            };
        }
    }
);

 

تابعی برای اینکار بنویس مثل تابعی که من نوشتم toggleRightDrawer 


  • 1397/12/23
  • ساعت 06:56

سلام ممنون من هم از این تابع استفاده نمودم ولی دو کار باهم انجام نمیشه....دراور بسته میشه ولی به صفحه بعدی نمیره

یا به صفحه دیگه میره ولی دراور بسته نمیشه

 


  • 1397/12/26
  • ساعت 11:20

سلام دوست من

این روش رو تست کن ببین چطور میشه

 

import { DrawerActions } from 'react-navigation';
goTo = (route, props) => {
  this.props.navigation.navigate(route, props);
  this.props.navigation.dispatch(DrawerActions.closeDrawer());
}

 

 


  • 1397/12/26
  • ساعت 14:42

.سلام ..ممنون از پاسختون ...متاسفانه ...لینک اولی رو کلیک میکنم بسته نمیشه میره صفحه بعدی 

لینک دومی ...صفحه بسته میشه ومیره وبرمیگرده همون صفحه اصلی

props اگر ورودی بدهم خطا میگره مجبور شدم حذفش کنم.

نسخه rect navigation 3.4 است

فکر کنم بایستی نسخه 2 رو نصب کنم...


logo-samandehi