3

我正在尝试使用 redux 在 react-native-router-flux 中实现 react-native-drawer。尝试以下示例：https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md但仍然出现错误：Element type is invalid: expected a string (for built-in components) but got: object. Check the render method of 'DefaultRenderer'.

在 react-native-router-flux 中实现抽屉的正确方法是什么？

编辑 - 更新：但仍然收到错误“元素类型无效......”

快速说明：如果我执行 Actions.drawer 我会收到错误，但如果我执行 Actions.home 什么也不会发生，但仍会调用动作 REACT_NATIVE_ROUTER_FLUX_RESET

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} initial={true}>
              <Scene component={Home} key='home' title='Home' type='reset'/>
            </Scene>
          </Scene>
        </RouterWithRedux>
      </Provider>
    )
  }
}

然后我在登录中按下一个按钮，它会触发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 state = this.props.navigationState;
    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>
        <Text>Home</Text>
      </TouchableHighlight>
      <TouchableHighlight>
        <Text>Profile</Text>
      </TouchableHighlight>
      <TouchableHighlight>
        <Text>Friends</Text>
      </TouchableHighlight>
    </View>
  )
}

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

错误：

在此处输入图像描述

4

2 回答 2

0

我认为问题出在您的组件中。

请注意，您正在像这样导入抽屉视图：

import NavDrawerPanel from './NavDrawerPanel'

但如果您仔细查看 NavDrawerPanel 文件，则没有默认导出。所以而不是拥有

const NavDrawerPanel

你应该有：

export const NavDrawerPanel

该错误有点误导，但它指的是抽屉的视图而不是抽屉的组件本身。让我知道这是否有用:)

于 2017-03-20T11:36:20.943 回答
0

请参阅此链接...只需在第一个答案中复制并粘贴抽屉组件...尝试此代码并替换为 DefaultRenderer：

 <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/>
于 2016-09-23T10:43:30.703 回答