react-native: 如何结合react-native-router-flux 和react-native-drawer?
react-native: How to combine react-native-router-flux and react-native-drawer?
我正在尝试将 react-native-router-flux
与 react-native-drawer
整合
我的主要成分其实是App.js。我copy/paste只有相关的部分。
import AppRoutes from './Router';
...
constructor(props) {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
Actions.mainBucket({ type: 'reset' });
} else {
Actions.authBucket({ type: 'reset' });
}
});
super(props);
}
}
...
render() {
const store = createStore(
reducers,
{},
applyMiddleware(ReduxThunk)
);
return (
<Provider store={store}>
<AppRoutes />
</Provider>
);
}
这是Router.js
const scenes = Actions.create(
<Scene key="root" hideNavBar open={false} >
<Scene key="splashBucket">
<Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
</Scene>
<Scene key="authBucket">
<Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
</Scene>
<Scene key="mainBucket" hideNavBar={false}>
<Scene key="schedule" component={Schedule} title="Impegni" />
<Scene key="peopleList" component={PeopleList} title="Lista pesone"/>
</Scene>
</Scene>
);
const AppRoutes = () => (
<Router
sceneStyle={{ paddingTop: 65 }}
scenes={scenes}
/>
);
export default AppRoutes;
我的目标是使用键 "mainBucket". 将 SideDrawer 添加到场景桶中,因为如您所见,这个 is/will 是我的应用程序的主要部分,用户自动重定向到此存储桶,使用 firebase 实现自动登录。
自动登录和打开 mainBucket 正常。
要开始添加侧边抽屉,我认为侧边抽屉内容组件最初只会呈现 <Text>
使用 SideMenu
组件
我该如何进行?
我创建了以下两个文件。
第一个是NavigationDrawer.js
export default class NavigationDrawer extends Component {
render() {
const state = this.props.navigationState;
const children = state.children;
return (
<Drawer
ref="navigation"
open={state.open}
onOpen={() => Actions.refresh({ key: state.key, open: true })}
onClose={() => Actions.refresh({ key: state.key, open: false })}
type="displace"
content={<SideMenu />}
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>
);
}
}
第二个是near-emptySideMenu.js
import React from 'react';
import { View, Text } from 'react-native';
const SideMenu = () => (
<View>
<Text>
SideMenu
</Text>
</View>
);
export default SideMenu;
然后我尝试修改场景定义,将 NavigationDrawer 组件添加到 mainBucket 定义中
<Scene key="mainBucket" component={NavigationDrawer}>
<Scene key="schedule" initital component={Schedule} title="Impegni" hideNavBar={false} />
<Scene key="peopleList" component={PeopleList} title="Lista persone" hideNavBar={false} />
</Scene>
问题是我再也看不到带有标题的react-native-router-flux headers,所以我再也看不到顶部操作栏了。
我哪里做错了?
这行得通。我用另一个场景包裹了整个 mainBucket,在这个场景中我使用抽屉作为组件。
另请注意,我将样式移动到单个场景
const scenes = Actions.create(
<Scene key="root">
<Scene key="splashBucket">
<Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
</Scene>
<Scene key="authBucket" sceneStyle={{ paddingTop: 65 }}>
<Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
</Scene>
<Scene key="mainBucket" component={NavigationDrawer}>
<Scene key="mainBucketInternal">
<Scene
initital
key="schedule"
component={Schedule}
title="Impegni"
hideNavBar={false}
sceneStyle={{ paddingTop: 65 }}
/>
<Scene
key="peopleList"
component={PeopleList}
title="Lista persone"
hideNavBar={false}
sceneStyle={{ paddingTop: 65 }}
/>
</Scene>
</Scene>
</Scene>
);
const AppRoutes = () => (
<Router
scenes={scenes}
/>
);
export default AppRoutes;
我正在尝试将 react-native-router-flux
与 react-native-drawer
我的主要成分其实是App.js。我copy/paste只有相关的部分。
import AppRoutes from './Router';
...
constructor(props) {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
Actions.mainBucket({ type: 'reset' });
} else {
Actions.authBucket({ type: 'reset' });
}
});
super(props);
}
}
...
render() {
const store = createStore(
reducers,
{},
applyMiddleware(ReduxThunk)
);
return (
<Provider store={store}>
<AppRoutes />
</Provider>
);
}
这是Router.js
const scenes = Actions.create(
<Scene key="root" hideNavBar open={false} >
<Scene key="splashBucket">
<Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
</Scene>
<Scene key="authBucket">
<Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
</Scene>
<Scene key="mainBucket" hideNavBar={false}>
<Scene key="schedule" component={Schedule} title="Impegni" />
<Scene key="peopleList" component={PeopleList} title="Lista pesone"/>
</Scene>
</Scene>
);
const AppRoutes = () => (
<Router
sceneStyle={{ paddingTop: 65 }}
scenes={scenes}
/>
);
export default AppRoutes;
我的目标是使用键 "mainBucket". 将 SideDrawer 添加到场景桶中,因为如您所见,这个 is/will 是我的应用程序的主要部分,用户自动重定向到此存储桶,使用 firebase 实现自动登录。
自动登录和打开 mainBucket 正常。
要开始添加侧边抽屉,我认为侧边抽屉内容组件最初只会呈现 <Text>
使用 SideMenu
组件
我该如何进行?
我创建了以下两个文件。
第一个是NavigationDrawer.js
export default class NavigationDrawer extends Component {
render() {
const state = this.props.navigationState;
const children = state.children;
return (
<Drawer
ref="navigation"
open={state.open}
onOpen={() => Actions.refresh({ key: state.key, open: true })}
onClose={() => Actions.refresh({ key: state.key, open: false })}
type="displace"
content={<SideMenu />}
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>
);
}
}
第二个是near-emptySideMenu.js
import React from 'react';
import { View, Text } from 'react-native';
const SideMenu = () => (
<View>
<Text>
SideMenu
</Text>
</View>
);
export default SideMenu;
然后我尝试修改场景定义,将 NavigationDrawer 组件添加到 mainBucket 定义中
<Scene key="mainBucket" component={NavigationDrawer}>
<Scene key="schedule" initital component={Schedule} title="Impegni" hideNavBar={false} />
<Scene key="peopleList" component={PeopleList} title="Lista persone" hideNavBar={false} />
</Scene>
问题是我再也看不到带有标题的react-native-router-flux headers,所以我再也看不到顶部操作栏了。
我哪里做错了?
这行得通。我用另一个场景包裹了整个 mainBucket,在这个场景中我使用抽屉作为组件。
另请注意,我将样式移动到单个场景
const scenes = Actions.create(
<Scene key="root">
<Scene key="splashBucket">
<Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
</Scene>
<Scene key="authBucket" sceneStyle={{ paddingTop: 65 }}>
<Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
</Scene>
<Scene key="mainBucket" component={NavigationDrawer}>
<Scene key="mainBucketInternal">
<Scene
initital
key="schedule"
component={Schedule}
title="Impegni"
hideNavBar={false}
sceneStyle={{ paddingTop: 65 }}
/>
<Scene
key="peopleList"
component={PeopleList}
title="Lista persone"
hideNavBar={false}
sceneStyle={{ paddingTop: 65 }}
/>
</Scene>
</Scene>
</Scene>
);
const AppRoutes = () => (
<Router
scenes={scenes}
/>
);
export default AppRoutes;