如何使用redux在react-native-router-flux中实现react-native-drawer？

问题描述：

我试图在react-native-router-flux和redux中实现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'.如何使用redux在react-native-router-flux中实现react-native-drawer？

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

错误：

您可能忘记导出您的NavDrawPanel。很可能它只是缺少从NavDrawPanel模块导出的对象。 – Nozim

答

见this链接...只是在第一个答案复制和粘贴抽屉组件.. 。试试这段代码并用DefaultRenderer替换：

<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/>

欣赏这一建议，并按照您的建议进行，但仍然收到相同的错误。更新了原文，请看看。 –

快速注意：如果我执行Actions.drawer，我会得到错误，但是如果我执行Actions.home，则什么都不会发生，但操作REACT_NATIVE_ROUTER_FLUX_RESET仍然被调用 –

检查以查看您是否看过我的最新评论。请告诉我。 –

答

我认为问题出在你的组件上。

注意，要导入的抽屉观点是这样的：

import NavDrawerPanel from './NavDrawerPanel'

，但如果你在NavDrawerPanel文件细看没有默认的导出。因此不是

const NavDrawerPanel

你应该有：

export const NavDrawerPanel

的错误是有点误导，但它指的是抽屉的观点不抽屉的组件本身。让我知道如果这是诀窍:)

如何使用redux在react-native-router-flux中实现react-native-drawer？

相关推荐