如何在react-native-router-flux和redux中实现react-native-drawer? [英] How to implement react-native-drawer in react-native-router-flux with redux?
问题描述
我试图在react-native-router-flux和redux中实现react-native-drawer。尝试了以下示例:
查看这个链接...只是复制和粘贴抽屉组件在第一个答案...
尝试此代码,并替换为DefaultRenderer:
< DefaultRenderer navigationState = {children [0]} onNavigate = {this.props.onNavigate} />
I am trying to implement react-native-drawer in react-native-router-flux with redux. Tried following this example: https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md but still getting an error: Element type is invalid: expected a string (for built-in components) but got: object. Check the render method of 'DefaultRenderer'.
What the correct way to implement the drawer in react-native-router-flux?
EDIT - UPDATE: Yet still getting the error 'Element type is invalid...'
Quick Note: If I do Actions.drawer I get the error but if I do Actions.home nothing happens but the action REACT_NATIVE_ROUTER_FLUX_RESET is still being called
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>
)
}
}
Then I press a button in Login and it triggers Actions.
to navigate to. The NavDrawer is:
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>
);
}
}
And NavDrawerPanel is:
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'
},
})
Error:
See this link...just copy and paste drawer component in first answer... Try this code and replace with DefaultRenderer:
<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate}/>
这篇关于如何在react-native-router-flux和redux中实现react-native-drawer?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!