爲什麼不使用React Native Router Flux + Redux觸發React Native Drawer？

Question

我使用以下組件來創建一個陣營本地+終極版的應用程序：

• React Native Router Flux
• React Native Drawer

我嘗試以下完全example provided on how to implement the drawer，但導航到抽屜應該是當顯示，使用Actions.drawer，我得到的錯誤：

但是，如果我嘗試導航到場景，通過Actions.home，在抽屜場景中，沒有任何反應，但動作REACT_NATIVE_ROUTER_FLUX_RESET仍然通過redux-logger調用。

試過下面的例子，但沒有運氣。我可能做錯了什麼？

下面是使用終極版我設置了場景：

// @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.瀏覽到。

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

編輯 這裏是在場景+終極版設置了什麼東西被輸入：

// @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（）：

EDIT 3 - 的console.log（this.props）內NavDrawer.js

的NavDrawer永遠不會被內部NavDrawer.js和Actions.home呈現，這樣的console.log（this.props）不得到記錄

但隨着執行console.log（this.props），我得到：

而且裏面NavDrawer.js和操作的console.log（this.props）。抽屜裏，我得到：

Answer 1

不知道這是否是問題，但你似乎並不在NavDrawerPanel組件上進行進口TouchableHighlight，所以：

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

Answer 2

我想你在傳遞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 3

我不是這方面的專家，但我使用的反應本地路由器通量和反應原生抽屜在我的應用程序沒有任何問題。我在代碼和我之間看到的一些差異是：

1. 您有兩個場景設置爲initial={true}。這可能會弄亂路由器。
2. 我不使用Actions.drawer直接導航到抽屜，而是使用Actions.home導航到家庭場景。

如果沒有這些作品，您可以分享您的家庭組件的render()功能嗎？

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(); 
}