Question

我正在使用本机基础组件和 react-native 进行应用程序，在本例中为 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;

我正在阅读，我需要在控制台中进行react-native链接后更改 Android 项目的MainActivity.java中的某些行，我已经有了react-native-gesture-处理程序包已安装

这是我运行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

从左向右滑动手指时如何设置反应库抽屉导航打开

0 个答案: