如何使用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' 
    }, 
})

錯誤：

來源

2016-09-23 Jo Ko

您可能忘記導出您的NavDrawPanel。很可能它只是缺少從NavDrawPanel模塊導出的對象。 – Nozim

見this鏈接...只是在第一個答案複製和粘貼抽屜組件.. 。試試這段代碼並用DefaultRenderer替換：

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

來源

2016-09-23 10:43:30

欣賞這一建議，並按照您的建議進行，但仍然收到相同的錯誤。更新了原文，請看看。 –

快速注意：如果我執行Actions.drawer，我會得到錯誤，但是如果我執行Actions.home，則什麼都不會發生，但操作REACT_NATIVE_ROUTER_FLUX_RESET仍然被調用 –

檢查以查看您是否看過我的最新評論。請告訴我。 –

我認爲問題出在你的組件上。

注意，要導入的抽屜觀點是這樣的：

import NavDrawerPanel from './NavDrawerPanel'

，但如果你在NavDrawerPanel文件細看沒有默認的導出。因此不是

const NavDrawerPanel

你應該有：

export const NavDrawerPanel

的錯誤是有點誤導，但它指的是抽屜的觀點不抽屜的組件本身。讓我知道如果這是訣竅:)

來源

2017-03-20 11:36:20 ose

如何使用redux在react-native-router-flux中實現react-native-drawer？

回答

相關問題