Tại sao React Native Drawer không được kích hoạt bằng React Native Router Flux + Redux?

Question

Tôi đang sử dụng các thành phần sau đây để tạo ra một Phản ứng Native + Redux ứng dụng:

• React Native Router Flux
• React Native Drawer

tôi đã cố gắng sau chính xác example provided on how to implement the drawer, nhưng khi điều hướng đến nơi ngăn kéo nên được hiển thị, sử dụng Actions.drawer, tôi gặp lỗi:

Nhưng nếu tôi cố điều hướng đến Scene, qua Actions.home, bên trong Scene Drawer, không có gì xảy ra nhưng hành động REACT_NATIVE_ROUTER_FLUX_RESET vẫn đang được gọi qua số redux-logger.

Đã thử theo chính xác ví dụ nhưng không may mắn. Tôi có thể làm gì sai?

Dưới đây là bộ của tôi lên cho cảnh sử dụng 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> 
    ) 
    } 
} 

Sau đó, tôi nhấn một nút trong Login và nó gây nên Actions. để điều hướng đến.

Các NavDrawer là:

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

Và NavDrawerPanel là:

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

EDIT Dưới đây là những gì đang được nhập khẩu nơi Scene + Redux được thiết lập:

// @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' 

EDIT 2 - console.log (this.props)

Làm console.log (this.props) trong thành phần Login:

Khi Actions.home() từ thành phần Login:

Khi Actions.drawer() từ thành phần Login:

EDIT 3 - console.log (this.props) bên NavDrawer.js

Các NavDrawer không bao giờ được trả lại để console.log (this.props) không thường xuyên bị thoát

Nhưng với console.log (this.props) bên NavDrawer.js và Actions.home, tôi nhận được:

Và với console.log (this.props) bên trong NavDrawer.js và Tác vụ.ngăn kéo, tôi nhận được:

Answer 1

Không chắc nếu đây là vấn đề nhưng bạn dường như không được nhập khẩu TouchableHighlight trên thành phần NavDrawerPanel, vì vậy:

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

Answer 2

Tôi nghĩ rằng bạn vượt qua trong giá trị sai cho navigationState trong DefaultRenderer. Nó phải là

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

Trong lớp NavDrawer bạn

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

Tôi không phải là một chuyên gia trong việc này nhưng tôi đang sử dụng phản ứng bản địa-router-flux và phản ứng bản địa-ngăn kéo trong ứng dụng của tôi mà không có bất kỳ vấn đề gì. Một số khác biệt tôi thấy giữa mã của bạn và của tôi là:

1. Bạn có hai cảnh được đặt thành initial={true}. Điều này có thể làm hỏng Router.
2. Tôi không điều hướng trực tiếp đến ngăn kéo bằng cách sử dụng Actions.drawer nhưng thay vào đó tôi điều hướng đến cảnh nhà bằng cách sử dụng Actions.home.

Nếu không có công trình nào trong số này hoạt động, bạn có thể chia sẻ chức năng render() của thành phần nhà bạn không?

Answer 4

Không chắc chắn nếu điều này vẫn còn một cái gì đó bạn đang làm việc trên, nhưng đối với những người khác sử dụng các thư viện, bạn chắc chắn không muốn sử dụng ngăn kéo như là một cảnh. Nó sẽ quấn cho bạn toàn bộ bộ định tuyến như vậy:

<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> 

Đó là cách chúng tôi đã kết nối và hoạt động tốt. Sau đó, chúng tôi chỉ chuyển các chức năng này vào cảnh của chúng tôi khi cần:

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

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