react-native 导航参数 drawerNavigator [英] react-native navigation params drawerNavigator

问题描述

我有一个 tabNavigator 嵌套在 drawerNavigator 父级中.在 drawerNavigator 中有一个自定义内容屏幕，这是一个收藏夹列表.

I have a tabNavigator nested in a drawerNavigator parent. In the drawerNavigator is have a custom content screen which is a favourite list.

我想要实现的是，当抽屉被触发时，在重新加载时打开收藏夹列表.

What I'm trying to achieve is when the drawer is triggered open the favourite list in reloaded.

我正在将 navigator 参数从 drawerNavigator 传递到 tabNavigator，但是当我尝试从 tabNavigator 传递到 drawerNavigator 时，它是未定义的.

I'm passing navigator params from the drawerNavigator to the tabNavigator but when I try to pass from tabNavigator to drawerNavigator it's undefined.

如何将导航参数从 LaunchScreen 传递到 DrawerScreen?

How can I pass a navigation param from LaunchScreen into the DrawerScreen?

export const PrimaryNav = TabNavigator({
  Home: {
    screen: LaunchScreen,
    navigationOptions: {
      swipeEnabled: false,
      tabBarIcon: ({ tintColor }) => (
        <Image
          style={[styles.icon]}
          source={require('../Images/img.png')}
        />
      ),
    },
  },
  Map: {
    screen: FirstScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor }) => (
        <Image
          source={require('../Images/img1.png')}
          style={[styles.icon]}
        />
      ),
    },
  },
},
{
  headerMode: 'none',  
  tabBarPosition: 'top',
  animationEnabled: true,
  tabBarOptions: {
    showIcon: true,
    showLabel: false,
    activeTintColor: '#ffffff',
    indicatorStyle: {
      borderBottomColor: '#33b2f4',
      borderBottomWidth: 3,
    },
    style: {
    backgroundColor: '#000',
    paddingTop:20,
    }
  },
});

const MyDrawerNavigator =  DrawerNavigator({
  Home: {
    screen: PrimaryNav
  },
}, {
  contentComponent: DrawerScreen
});

export default MyDrawerNavigator

推荐答案

好的，我是这样解决这个问题的:

Ok so here's how I solved the issue:

我连接了 mobx 并实现了一个简单的商店:

I hooked up mobx and implemented a simple store:

import {observable, action} from 'mobx'

class Store {
  @observable refresh = 'false';

  @action changeRefresh(value) {
    this.refresh = value;
  }

}

export default new Store;

然后我在我的根容器中测试了绘制状态(打开/关闭):

Then I tested for the draw state (open/close) in my root container:

class RootContainer extends Component {

  handleNavigationState = (previous, next, action) => {    
    if (action.routeName === 'DrawerOpen') {
        this.props.store.changeRefresh('true')  
    } else if (action.routeName === 'DrawerClose') {
        this.props.store.changeRefresh('false')    
    }
  }

  render () {
    return (
      <View style={styles.applicationView}>
        <StatusBar barStyle='light-content' />
        <AppNavigation onNavigationStateChange={this.handleNavigationState} />
      </View>
    )
  }
}

然后检查我抽屉屏幕中的商店道具并重新加载我最喜欢的列表:

Then checked the store prop in my drawer screen and reloaded my favourite list:

render () {
  this.props.store.refresh==='true' ? (this.loadFavs()) : (null)
  ...

这篇关于react-native 导航参数 drawerNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！