为什么不使用React Native Router Flux + Redux触发React Native Drawer？

问题描述：

我使用以下组件来创建一个阵营本地+终极版的应用程序：为什么不使用React Native Router Flux + Redux触发React Native Drawer？

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）。抽屉里，我得到：

您确定您正确导入了一切吗？ – octohedron

@Gazta是的，原来的帖子究竟如何显示。难道问题是抽屉需要以不同的方式实施，因为它已经设置好了？ –

发布您正在设置场景的文件的其余部分 – octohedron

答

不知道这是否是问题，但你似乎并不在NavDrawerPanel组件上进行进口TouchableHighlight，所以：

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

对不起，它已被导入，但只是在复制代码时错过了它。对我来说，错误可能与'DefaultRenderer'有关？但似乎无法弄清楚什么是错误的 –

检查，看看你是否看过我以前的评论。请告诉我。 –

答

我想你在传递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> 
    ); 
    } 
}

欣赏这个建议并给了它一个尝试，但不幸的是仍然收到错误'元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件），但是得到：object。检查'DefaultRenderer'的渲染方法。我假设这个错误与'DefaultRenderer'有关，但仍然无法弄清楚究竟是什么 –

如果你看过我的最后一条评论，请告诉我。 –

当您导航到家庭和抽屉场景时，您是否可以发布您的家庭组件代码并记录navigationState的输出？你从哪里调用Actions.home（）和Action.drawer（）？顺便说一句，您不应该使用Actions.drawer（）作为抽屉场景导航，因为您的路由器配置中的场景包裹在您的抽屉场景中将包含抽屉 – alpha

答

我不是这方面的专家，但我使用的反应本地路由器通量和反应原生抽屉在我的应用程序没有任何问题。我在代码和我之间看到的一些差异是：

您有两个场景设置为initial={true}。这可能会弄乱路由器。
我不使用Actions.drawer直接导航到抽屉，而是使用Actions.home导航到家庭场景。

如果没有这些作品，您可以分享您的家庭组件的render()功能吗？

答

不确定这是否仍然是您正在处理的内容，但对于使用这些库的其他人，您肯定不希望将抽屉用作场景。它应该包裹你整个路由器像这样：

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

为什么不使用React Native Router Flux + Redux触发React Native Drawer？

相关推荐