react-native - 处理 react-navigation 的 TabNavigator 中的单击事件以刷新反应原生应用程序中的视图

Question

我正在编写 React Native 应用程序。我正在使用 react-navigation 来导航屏幕。我有 2 个 StackNavigator，它们都留在 TabNavigator 中。我还有一个 DrawerNavigator。

const HomeStack = StackNavigator({
  screenA: {screen: screenA},
  screenB: {screen: screenB},
});

const UserStack = StackNavigator({
  screenC: {screen: screenC},
  screenD: {screen: screenD},
});

const TabBar = TabNavigator({
  home1: {
    screen: HomeStack,
  },
  user1: {
    screen: UserStack,
  }
});

const DrawerMenu = DrawerNavigator({
  TabBar: {screen: TabBar},
},{
    drawerWidth: 300,
    drawerPostition: 'left',
    contentComponent: props => <MenuSide {...props}/>,
  }
)
var App = React.createClass({

  render: function() {
     return (
      <View>
        <DrawerMenu name='John'/>
      </View>
    );
  },
});

问题1：我希望当我点击标签home1或user1时，home1的屏幕（screenA）或user1的屏幕（screenC）会刷新。有没有办法处理哪个选项卡聚焦的事件？

问题 2：在 App 类的 DrawerMenu 中，我有一个道具“名称”。我希望 screenA 会收到道具“名称”。我要怎么做才能实现我的目标？

太感谢了。

Answer 1

根据此处的文档，您可以使用navigationOptions: {navigationOptions: () => doWhatever()}来处理标签栏点击。

在你的情况下

const TabBar = TabNavigator({
  home1: {
    screen: HomeStack,
  },
  user1: {
    screen: UserStack,
    navigationOptions: {navigationOptions: () => doWhatever()}
  }
});