react-native-off-canvas-menu仅在通过react-navigation进行编程导航之前打开菜单

Question

我一直在对我的应用程序中的所有导航使用react-native-off-canvas-menu，但是，该菜单仅使用菜单，而不能在单击按钮时以编程方式进行导航。因此，我介绍了反应导航。

react-native-off-canvas-menu菜单仅在我通过单击按钮进行导航以使用react-navigation进行导航之前打开菜单。

有什么想法吗？

代码：

同时配置react-native-offcanvas-menu和react-navigation的代码，并导出带有菜单的react-navigation堆栈作为初始加载的页面：

import React from 'react'
import { vepo } from '../model'
import type { Element } from 'react'
import { View } from 'react-native'
import Icon from 'react-native-vector-icons/EvilIcons'
import FaIcon from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'
import { closePageMenu, openPageMenu } from './action'
import { OffCanvasReveal } from 'react-native-off-canvas-menu'
import AddPage from '../product/add/view'
import LoginPage from '../user/login/view'
import ProductSearchQueryPage from '../product/search/query/view'
import AlertModalComponent  from '../formControls/alertModal/view'
import type { State } from '../../sharedModels/state'
import type { Dispatch } from 'redux'
import type { Node } from 'react'
import { createStackNavigator } from 'react-navigation'

import {
  updateAlertModalIsOpen
} from '../formControls/alertModal/action'
import { MenuProps } from './model'

const mapStateToProps = (state: State): Object => {
  return {
    isOpen: state.menu.isOpen
  } 
}

const mapDispatchToProps = (dispatch: Dispatch<*>): Object => ({
  updateAlertModalIsOpen: (isOpen) => {
    dispatch(updateAlertModalIsOpen(isOpen))
  },
  closePageMenu: () => {
    dispatch(closePageMenu())
  },
  openPageMenu: () => {
    dispatch(openPageMenu())
  }
})

let MenuPage = (props: MenuProps): Node => {

  console.log(props)
  return(
  <View style={{ flex: 1 }}>

    <AlertModalComponent yesClicked={() => {
      props.updateAlertModalIsOpen(false)
    }} />
    <OffCanvasReveal
      active={props.isOpen}
      onMenuPress={props.closePageMenu}
      backgroundColor={'#222222'}
      menuTextStyles={{ 
        color: '#FFFFFF', backgroundColor: 'transparent'
      }}
      handleBackPress={true}
      menuItems={[
        {
          title: 'Search Vegan',
          icon: <Icon 
            name="search" 
            size={35} 
            color={'#FFFFFF'} />,
          renderScene: <ProductSearchQueryPage />
        },
        {
          title: 'Login',
          icon: <FaIcon 
            name="sign-in" 
            size={35} 
            color={'#FFFFFF'} />,
          renderScene: <LoginPage />
        },
        {
          title: 'Add Vegan',
          icon: <Icon 
            name="plus" 
            size={35}
            color={'#FFFFFF'} />,
          renderScene: <AddPage rerenderKey={false} />
        }
      ]} />
  </View>
)}

MenuPage = connect(
  mapStateToProps,
  mapDispatchToProps
)(MenuPage)

const RootStack = createStackNavigator(
  {
    Search: ProductSearchQueryPage,
    Login: LoginPage,
    Add: AddPage,
    MenuPage: MenuPage
  },
  {
    initialRouteName: 'MenuPage',
    headerMode: 'none'
  }
)

export default RootStack

以编程方式导航的代码：

import FBLoginButton from './button/view'
import React, { Component } from 'react'
import { View } from 'react-native'
import { Container, Text, Button } from 'native-base'
import VepoHeader from '../../formControls/header/view'
import { styles } from '../../style'

import { withNavigation } from 'react-navigation'

class LoginView extends Component {
    constructor(props) {
        super(props)
        this.buttonPress = this.buttonPress.bind(this)
      }

      buttonPress() {
        console.log('called')
        this.props.navigation.navigate('Search')
      }
  render() {
    return (
      <Container style={{ backgroundColor: '#27a562' }}>
        <Container
          style={{
            flex: 1,
            height: '100%',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
          }}>
          <FBLoginButton />
          <Text style={{ color: '#FFF', 
          marginTop: 20,
          marginBottom: 20 }}>OR</Text>
          <Button
            block
            style={{
              ...styles.labelHeight,
              borderRadius: 4,
              borderWidth: 0.5,
              borderColor: '#FFF',
              width: 250,
              marginLeft: 'auto',
              marginRight: 'auto',
              backgroundColor: 'transparent',

            }}
            onPress={this.buttonPress}>
            <Text style={{fontSize: 13.5}}>Continue without Login</Text>
          </Button>
        </Container>
      </Container>
    )
  }
}

export default withNavigation(LoginView)

通过将根导航堆栈导入为“菜单”来初始化应用程序

import React, { Component } from 'react'
import Menu from './menu/view'
import Props from 'prop-types'

class Vepo extends Component {
  componentDidMount() {
    const { store } = this.context
    this.unsubscribe = store.subscribe(() => { })
    store.dispatch(this.props.fetchUserGeoCoords())
    store.dispatch(this.props.fetchSearchQueryPageCategories())
    store.dispatch(this.props.fetchCategories())
  }

  componentWillUnmount() {
    this.unsubscribe()
  }

  render(): Object {
    return <Menu />
  }
}
Vepo.contextTypes = {
  store: Props.object
}

export default Vepo

.... initialise应用程序：

...export const App = () => (
  <Provider store={store}>
    <Vepo
      fetchUserGeoCoords={fetchUserGeoCoords}
      fetchSearchQueryPageCategories={fetchSearchQueryPageCategories}
      fetchCategories={fetchCategories}
    />
  </Provider>
)

AppRegistry.registerComponent('vepo', () => App)