Как настроить навигацию по ящику реагирующей базы, чтобы открывать ее при перемещении пальца слева направо - PullRequest
Новая
       14

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

0 голосов
/ 01 марта 2019

Я делаю приложение с act-native , используя компоненты native-base, в моем случае Header и Drawer , но когда я пытаюсьоткрыть ящик жестом пальцев, перемещающихся слева направо от левого края, ящик не отображается, однако, когда я открываю его, нажимая на кнопку меню заголовка, могу ли я играть с ним жестами, даже близко сдвигая егосправа налево

App.js 

import {Drawer} from 'native-base';
import Sidebar from './Sidebar/sidebar';
import HomeScreen from './Screens/home';

export default class Main extends Component {
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this.drawer._root.open()
  };
  render() {
    return (
              <Drawer
                ref={(ref) => { this.drawer = ref; }}
                content={<Sidebar/>}
                onClose={() => this.closeDrawer()} >

                <HomeScreen
                    openDrawer={this.openDrawer.bind(this)}
                />

              </Drawer>
    );
  }
}

module.exports = Main;

Home.js 

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button,
        Icon, Title, Content, Footer, FooterTab } from 'native-base';


export default class HomeScreen extends Component {
  render() {
    return (
      <Container>
        <Header>
        <Button
            transparent
            onPress={()=>this.props.openDrawer()}>
            <Icon name="menu" />
        </Button>
          <Body>
            <Title>Home</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name='search' />
            </Button>
            <Button transparent>
              <Icon name='heart' />
            </Button>
            <Button transparent>
              <Icon name='more' />
            </Button>
          </Right>
        </Header>
        <Content />
        <Footer>
          <FooterTab>
            <Button>
              <Icon name="apps" />
            </Button>
            <Button>
              <Icon name="camera" />
            </Button>
            <Button active>
              <Icon active name="navigate" />
            </Button>
            <Button>
              <Icon name="person" />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

Sidebar.js 

import React, { Component } from 'react';
import {
  Text,
} from 'react-native';

import {Content} from 'native-base';

export default class Sidebar extends Component {
  render() {
    return (
          <Content style={{backgroundColor:'#FFFFFF'}}>
            <Text>Drawer</Text>
          </Content>
    );
  }
}

module.exports = Sidebar;

Я читал, чтоМне нужно изменить некоторые строки в MainActivity.java из Android проекта после того, как я установил в консоли ссылку реактивный-родной, у меня уже установлен пакет реагирующего-жест-обработчика

Этомой settings.gradle файл после выполнения react-native-link команды 

rootProject.name = 'GSDApp'
include ':react-native-gesture-handler'
project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '..\\node_modules\\react-native-gesture-handler\\android')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '..\\node_modules\\react-native-vector-icons\\android')

include ':app'

и MainActivity.java 

package com.gsdapp;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    /**
    * Returns the name of the main component registered from JavaScript.
    * This is used to schedule rendering of the component.
    */
    @Override
    protected String getMainComponentName() {
        return "GSDApp";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

Любая помощь будет хорошо принята большое спасибо и извините мой английский; P

...