Question

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

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

但如果我尝试通过Actions.home在抽屉场景中导航到场景，则没有任何反应，但仍然通过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>
    )
  }
}

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

NavDrawer是：

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'
  },
})

修改以下是在场景+ 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没有任何问题。我在你的代码和我的代码之间看到的一些差异是：

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

如果这些都不起作用，您能否共享家庭组件的render()功能？

Answer 2

不确定这是否是问题，但您似乎没有在NavDrawerPanel组件上导入TouchableHighlight，因此：

import {
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from "react-native";

Answer 3

我认为你在DefaultRenderer中将错误的值传递给navigationState。它应该是

const { navigationState: { children } } = this.props;

在您的NavDrawer类

中

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; //wrong
    const { navigationState: { children } } = this.props;
    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>
    );
  }
}

Answer 4

不确定这仍然是您正在处理的事情，但对于使用这些库的任何其他人，您绝对不想将抽屉用作场景。它应该像你这样包装整个路由器：

<Drawer
    ref={(ref) => { this.drawer = ref; }}
    type="displace"
    useInteractionManager
    content={
      <SideMenuContent
        open={this.state.sideMenuOpen}
        openDrawer={this.openDrawer}
        closeDrawer={this.closeDrawer}
      />
    }
    tapToClose
    openDrawerOffset={0.08}
    negotiatePan
    onOpenStart={() => { this.setState({ sideMenuOpen: true }); }}
    onClose={() => { this.setState({ sideMenuOpen: false }); }}
  >
    <RouterWithRedux
      scenes={this.scenes}
    />
  </Drawer>

我们如何连接它，它运作良好。然后，我们根据需要将这些功能传递到场景中：

openDrawer = () => {
  this.drawer.open();
}

closeDrawer = () => {
  this.drawer.close();
}

为什么不使用React Native Router Flux + Redux触发React Native Drawer？

4 个答案: