react-native 导航参数drawerNavigator答案

【问题标题】：react-native navigation params drawerNavigatorreact-native 导航参数drawerNavigator
【发布时间】：2018-02-20 12:42:34
【问题描述】：

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

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

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

如何将 LaunchScreen 中的导航参数传递到 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

【问题讨论】：

标签： react-native tabnavigator

【解决方案1】：

好的，这就是我解决问题的方法：

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

import {observable, action} from 'mobx'

class Store {
  @observable refresh = 'false';

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

}

export default new Store;

然后我在我的根容器中测试了绘制状态（打开/关闭）：

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>
    )
  }
}

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

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

【讨论】：