使用react native操作栏设置DrawerOpen和DrawerClose

时间:2018-10-17 13:53:07

标签: navigation-drawer react-native-android react-native-navigation

我是React Native的新手,它试图在react-native-action-bar中实现Drawer菜单,但是它不起作用。

我的App.js文件在这里:

import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import { createDrawerNavigator } from 'react-navigation';

import Test from './src/pages/Test';
import Login from './src/pages/Login';
import Signup from './src/pages/customer/Signup';
import Forgot from './src/pages/Forgot';
import Profile from './src/pages/Profile';
import ChangePassword from './src/pages/ChangePassword';
import LocationPicker from './src/components/LocationPicker';
import Gallery from './src/pages/Gallery';
import Categories from './src/pages/Categories';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <AppStackNavigator />
    );
  }
}

const AppStackNavigator = createDrawerNavigator({
  Test: Test,
  Gallery: Gallery,
  Categories: Categories,
  ChangePassword: ChangePassword,
  Login: Login,
  Registration: Signup,
  Forgot: Forgot,
  Profile: Profile,
  LocationPicker: LocationPicker,
});

我正在调用从App.js自动调用的Test.js文件

Test.js代码在这里:

import React, { Component } from "react";
import {View, ScrollView, Text, StyleSheet } from 'react-native';
import { Icon } from 'react-native-elements';
import ActionBar from 'react-native-action-bar';
import { Drawer } from '../components/Navigators';


export default  class Test extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (

      <View>
        <ActionBar
          containerStyle={{height:60}}
          backgroundColor={'black'}
          title={'Gallery'}
          leftIconName={'menu'}
          onLeftPress={() => {this.props.navigation.navigate('DrawerOpen'); } }
          titleStyle={styles.pageTitle}
        />
        <Text>Test</Text>

      </View>
    );
  }
}

请任何人都可以帮助我解决这个问题。谢谢!

0 个答案:

没有答案