Как сделать навигационный ящик в реагировать на родной? - PullRequest
Новая
       22

Как сделать навигационный ящик в реагировать на родной?

0 голосов
/ 21 февраля 2020

Как мне сделать ящик в реагировать родной? Зависимости в моем пакете. json похож на этот 

"dependencies": {
"@expo/samples": "~36.0.0",
"@expo/vector-icons": "~10.0.0",
"@react-navigation/drawer": "^5.0.5",
"@react-navigation/web": "~1.0.0-alpha.9",
"expo": "~36.0.0",
"expo-asset": "~8.0.0",
"expo-constants": "~8.0.0",
"expo-font": "~8.0.0",
"expo-web-browser": "~8.0.0",
"galio-framework": "^0.6.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-gesture-handler": "~1.5.0",
"react-native-reanimated": "~1.4.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "~0.11.7",
"react-navigation": "~4.0.10",
"react-navigation-stack": "~1.10.3",
"react-navigation-tabs": "~2.6.2"
},

Я сделал Drawer. js файл похож на этот 

import React, { Component } from 'react';

import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from '../screens/Accountant/HomeScreen';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
  <Drawer.Navigator>
    <Drawer.Screen name="Home" component={HomeScreen} />

  </Drawer.Navigator>
  );
}

export default MyDrawer;

Мой заголовок. js файл: 

import React, { Component } from 'react';
import { Text, Block, Input, Button } from 'galio-framework';
import { Ionicons } from '@expo/vector-icons';

export default function Header(props) {
  return (
    <Block style={ styles.header }>
        <Ionicons name="md-menu" size={32} color="grey" onPress={() => this.props.navigator.openDrawer()}/>
        <Text style={ styles.title }>{ props.title }</Text>
    </Block>
  )
}

Мой Экран Accountant. js: 

import React, { Component } from 'react';
import { Text, Block, Input, Button } from 'galio-framework';
import { StyleSheet } from 'react-native';
import Header from '../../common/Header';
import Drawer from '../../common/Drawer';

class Accountant extends Component {
  render() {
  return (
    <Block style={ styles.blockStyle }>
        <Header title="Accounts" />
        <Drawer />
        <Text>Accountant Screen</Text>
    </Block>
  );
  }
}

export default Accountant;

Я сделал HomeScreen. js вот так: 

import React, { Component } from 'react';
import { Text, Block, Input, Button } from 'galio-framework';
import { StyleSheet } from 'react-native';

class Home extends Component {
  render() {
  return (
    <Block style={ styles.blockStyle }>

        <Text>Home Screen</Text>
    </Block>
  );
  }
}

export default Home;

Я знаю, что есть некоторые ошибки в моем коде. Я новичок, чтобы реагировать на родных. У меня есть заголовок в AccountantScreen. js. Когда я нажимаю значок меню в заголовке, ящик должен открыться. Но он не открывается.

Это весь мой код на github: https://github.com/boidurja/smartcope.git

Кто-нибудь может мне помочь? Спасибо.

1 Ответ

0 голосов
/ 21 февраля 2020

Попробуйте это

Мой заголовок. js Файл: 

import React, { Component } from 'react';
import { Text, Block, Input, Button } from 'galio-framework';
import { Ionicons } from '@expo/vector-icons';

export default function Header(props) {
  return (
    <Block style={ styles.header }>
        <Ionicons name="md-menu" size={32} color="grey" onPress={() => this.props.navigation.openDrawer()}/>
        <Text style={ styles.title }>{ props.title }</Text>
    </Block>
  )
}
...