Реагировать на навигацию open openDrawer () не работает - PullRequest
Новая
       66

Реагировать на навигацию open openDrawer () не работает

0 голосов
/ 03 июля 2019

Это мои коды навигации, у меня есть навигатор ящика, который содержит стеки внутри, у меня проблема в том, что я не могу использовать this.props.navigation.openDrawer() внутри стека, навигаторы открывают ящик, но я все еще могуоткройте ящик, проводя по экрану.мой код, 

const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: AppStack,
    MyAccount: MyAccountStack,
    PointsProfile: PointsProfStack,
    WishList: WishListStack,
    BonusPoint: BonusPoint,
    ContactUs: ContactUs,
    InviteFriend: InviteFriend,
    Terms: Terms,
    SignOut: SignOut
  }
}


const AppStack = createStackNavigator(
  {
    Home: Home,
    Notification: Notification,
    Suggested: Suggested,
    HomeSearch: HomeSearchV2,
    SearchHist: DishSearchHistory,
    //tab screens
    MealScreen: MealScreenTab,
    SearchScreen: SearchScreenTab,
    CuisineScreen: CuisineScreenTab
})

, когда я вошел в консоль this.props.navigation в AppStack, я обнаружил, что функция openDrawer() не предусмотрена.Но когда я консоль зарегистрировал this.props.navigation в пределах ContactUs, который является просто экраном, он показывает openDrawer() функцию.

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

Заранее спасибо.

Ответы [ 2 ]

2 голосов
/ 03 июля 2019

Здесь вы можете сослаться на код для навигационного ящика. 

import React, { Component } from 'react';
import { View, Image, TouchableOpacity } from 'react-native';
import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';

class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

const FirstActivity_StackNavigator = createStackNavigator({
  //All the screen from the Screen1 will be indexed here
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen2_StackNavigator = createStackNavigator({
  //All the screen from the Screen2 will be indexed here
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const Screen3_StackNavigator = createStackNavigator({
  //All the screen from the Screen3 will be indexed here
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

const DrawerNavigatorExample = createDrawerNavigator({
  //Drawer Options and indexing
  Screen1: {
    //Title
    screen: FirstActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 1',
    },
  },
  Screen2: {
    //Title
    screen: Screen2_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 2',
    },
  },
  Screen3: {
    //Title
    screen: Screen3_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Demo Screen 3',
    },
  },
});

export default createAppContainer(DrawerNavigatorExample);

Хорошего дня.

0 голосов
/ 03 июля 2019

Определен только экран выдвижного ящика, но с отображаемым видом не связано определение.Вы можете настроить свой собственный ящик, вы можете установить значение рисования.

пример 

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

const MyApp = createAppContainer(MyDrawerNavigator);
...