Question

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

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

我将导航器参数从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

Answer 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)
  ...

react-native navigation params drawerNavigator

1 个答案: