我目前正在构建一个带有tabview的应用程序,如下所示:
代码如下:
TabView.js
resetToTab(index, opts) {
var selected = this.state.selected;
this.setState({selected: index});
this.refs.tabs.jumpTo(this.refs.tabs.state.routeStack[index]);
this.props.onTab(index);
};
renderScene = (tab, navigator) => {
return (
<Navigator
style={{backgroundColor: '#FFFFFF'}}
initialRoute={tab.component.route()}
ref="views"
renderScene={(route, nav) => {
return React.createElement(route.component, _.extend({navigator: nav}, route.passProps));
}}
configureScene={() => {
return {
...Navigator.SceneConfigs.FadeAndroid,
defaultTransitionVelocity: 1000,
gestures: {}
};
}} />
);
};
render() {
return (
<View style={styles.tabbarContainer}>
<Navigator
style={{backgroundColor: '#FFFFFF'}}
initialRouteStack={this.props.tabs}
initialRoute={this.props.tabs[this.props.initialSelected || 0]}
ref="tabs"
key="navigator"
renderScene={this.renderScene}
configureScene={() => {
return {
...Navigator.SceneConfigs.FadeAndroid,
defaultTransitionVelocity: 10000,
gestures: {}
};
}} />
{this.state.showTabBar ? [
<View key="tabBar" style={styles.tabbarTabs}>
{_.map(this.props.tabs, (tab, index) => {
return this.renderTab(index, tab.name, tab.icon, tab.pastille, tab.hasShared);
})}
</View>
] : []}
</View>
);
};
main.js
render() {
return (
<View style={{flex: 1}}>
<TabView
ref="tabs"
onTab={(tab) => {
this.setState({tab});
}}
tabs={[
{
component: Liste,
name: 'Découvrir',
icon: require('../assets/img/tabs/icons/home.png')
},
{
component: Friends,
name: 'Amis',
icon: require('../assets/img/tabs/icons/friend.png'),
pastille: this.state.friendsPastille < 10 ? this.state.friendsPastille : '9+'
},
{
component: RecoStep1,
icon: require('../assets/img/tabs/icons/add.png'),
hasShared: MeStore.getState().me.HAS_SHARED
},
{
component: Notifs,
name: 'Notifs',
icon: require('../assets/img/tabs/icons/notif.png'),
pastille: this.state.notifsPastille < 10 ? this.state.notifsPastille : '9+'
},
{
component: Profil,
name: 'Profil',
icon: require('../assets/img/tabs/icons/account.png')
}
]}
initialSkipCache={!!this.notifLaunchTab}
initialSelected={this.notifLaunchTab || 0}
tabsBlocked={false} />
</View>
);
};
仅在点击底部菜单项时,我会跳回到正确的路线,但渲染场景中的导航器不会重置为第一个视图。我已尝试访问this.refs.views
,但未定义。调用resetToTab时,我希望能够执行仅this.refs.views.resetTo(this.props.tabs[selected].component.route())
之类的操作,this.refs.views
未定义。我非常坚持这个。