react-native - 为什么没有使用 React Native Router Flux + Redux 触发 React Native Drawer？

Question

我使用以下组件来创建 React Native + Redux 应用程序:

• React Native Router Flux
• React Native Drawer

我尝试完全遵循 example provided on how to implement the drawer ，但是当导航到抽屉应显示的位置时，使用 Actions.drawer ，我收到错误:

但是如果我尝试通过 Actions.home 导航到场景，在抽屉场景内，除了 Action REACT_NATIVE_ROUTER_FLUX_RESET 之外什么也没发生。仍在通过 redux-logger 调用.

尝试完全按照示例进行操作，但没有成功。我可能做错了什么？

这是我使用 Redux 进行的场景设置:

// @flow
import React, { Component } from 'react'
import {
  ActionConst,
  Actions,
  Router,
  Scene,
} from 'react-native-router-flux'
import {
  Provider,
  connect,
} from 'react-redux'

import configureStore from './store/configureStore'
import Login from './components/Login'
import Home from './components/Home'
import NavDrawer from './components/NavDrawer'

const RouterWithRedux = connect()(Router)
const store = configureStore()

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key='root'>
            <Scene component={Login} initial={true} key='login' title='Login'/>
            <Scene key="drawer" component={NavDrawer}>
              <Scene component={Home} key='home' title='Home' type='reset' initial={true}/>
            </Scene>
          </Scene>
        </RouterWithRedux>
      </Provider>
    )
  }
}

然后我在登录中按下一个按钮，它会触发 Actions.导航至。

抽屉导航是:

import React, { PropTypes } from 'react'
import Drawer from 'react-native-drawer'
import { Actions, DefaultRenderer } from 'react-native-router-flux'

import NavDrawerPanel from './NavDrawerPanel'

export default class NavDrawer extends Component {

  componentDidMount() {
      Actions.refresh({key: 'drawer', ref: this.refs.navigation});
  }

  render() {
    const children = state.children;

    return (
      <Drawer
        ref="navigation"
        type="displace"
        content={<NavDrawerPanel />}
        tapToClose
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        negotiatePan
        tweenHandler={(ratio) => ({
          main: { opacity: Math.max(0.54, 1 - ratio) },
        })}
      >
        <DefaultRenderer
          navigationState={children[0]}
          onNavigate={this.props.onNavigate}
        />
      </Drawer>
    );
  }
}

NavDrawerPanel 是:

import React from 'react';
import {PropTypes} from "react";
import {
  StyleSheet,
  Text,
  View,
} from "react-native";
import { Actions } from 'react-native-router-flux';

const NavDrawerPanel = (props, context) => {
  const drawer = context.drawer;
  return (
    <View style={styles.container}>
      <TouchableHighlight onPress={Actions.home}>
        <Text>Home Page</Text>
      </TouchableHighlight>
      <TouchableHighlight onPress={Actions.login}>
        <Text>Login Page</Text>
      </TouchableHighlight>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    backgroundColor: 'black'
  },
})

编辑以下是设置 Scene + Redux 时导入的内容:

// @flow
import React, { Component } from 'react'
import {
  ActionConst,
  Actions,
  Router,
  Scene,
} from 'react-native-router-flux'
import {
  Provider,
  connect,
} from 'react-redux'

import configureStore from './store/configureStore'
import Login from './components/Login'
import Home from './components/Home'
import NavDrawer from './components/NavDrawer'

编辑 2 - console.log(this.props)

在组件登录中执行console.log(this.props):

当 Actions.home() 从组件登录时:

当组件登录时 Actions.drawer() 时:

编辑 3 - NavDrawer.js 内的 console.log(this.props)

NavDrawer 永远不会被渲染，因此 console.log(this.props) 不会被记录

但是通过 NavDrawer.js 和 Actions.home 中的 console.log(this.props)，我得到:

通过 NavDrawer.js 和 Actions.drawer 中的 console.log(this.props)，我得到:

Answer 1

我不是这方面的专家，但我在我的应用程序中使用react-native-router-flux和react-native-drawer没有任何问题。我发现你的代码和我的代码之间的一些差异是:

1. 您有两个场景设置为 initial={true}。这可能会弄乱路由器。
2. 我不会使用 Actions.drawer 直接导航到抽屉，而是使用 Actions.home 导航到主场景。

如果这些都不起作用，您能分享一下您的 home 组件的 render() 函数吗？