我正在尝试react-native-router-flux
与react-native-drawer
我的主要组件实际上是App.js。我只复制/粘贴相关部分。
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 添加到 Scene 存储桶中。,因为,正如您所看到的,这是/将是我的应用程序的主要部分,并且用户会自动重定向到这个使用 firebase 实现自动登录的存储桶。
自动登录和打开 mainBucket 有效。
要开始添加 sidedrawer,我认为 sidedrawer 内容组件最初只会呈现一个<Text>
usingSideMenu
组件
我必须如何进行?
我创建了以下两个文件。
第一个是 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>
);
}
}
第二个是近乎空的 SideMenu.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 标题,所以我没有更多的顶部操作栏。
我究竟做错了什么'?
这有效。我用另一个场景包裹了整个 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;
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句