将道具传递给动态TabNavigator

Question

(也在https://github.com/react-navigation/react-navigation/issues/4059#issuecomment-453100740中提问)

我已经用动态替换了一个静态TabNavigator,事情似乎有效.
但是,按预期传递的道具不再以相同的方式传递.
知道如何解决这个问题吗？通过在静态解决方案中传递道具,或通过传递所需的道具(this.props.navigation).

这是我的顶级导航器:

export default createDrawerNavigator({
    Drawer: MainDrawerNavigator,
    Main: MainTabNavigator
}, {
  contentComponent: props => <Drawer {...props} />,
});

这是静态选项卡导航器和其中一个堆栈:

const ProfileStack = createStackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: () => ({
        title: 'Profile'
    })
  }
}, {
  initialRouteName: 'Profile'
});

ProfileStack.navigationOptions = {
  tabBarLabel: 'Profile',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name= 'md-person' />
  )};

const MainTabNavigator = createBottomTabNavigator({
  RequestStack,
  ProfileStack
}, {
    headerMode: 'none',
    initialRouteName: ProfileStack
});

和Profile屏幕:

import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import { Container, Header, Content, Text
} from 'native-base';

export default class Profile extends React.Component {
  static navigationOptions = {
    header: null
  };

  constructor(props) {
    super(props);
  }

  render() {
    console.log('in Profile. this.props:');
    console.log(this.props);
    return (
        <Container style={styles.container}>
          <Header>
              <TouchableOpacity
                onPress={() => this.props.navigation.openDrawer()}>
                 <Icon name="md-more" />
              </TouchableOpacity>
          </Header>
          <Content>

           <Text>aaa</Text>
          </Content>
        </Container>
    );
  }
}

单击"md-more"图标将打开抽屉(this.props.navigation.openDrawer).

使用动态选项卡导航器 - openDrawer不再传递给'Profile'.

当我用以下动态替换上面的静态选项卡导航器时,不会传递this.props.navigation.openDrawer,因此未在"配置文件"中定义(配置文件不会更改,更改仅在底部选项卡导航器中).

这是动态Tab导航器:

export default class DynamicTabNavigator extends React.Component {

  constructor(props) {
    super(props);
  }

  _tabNavigator() {
    let tabs = {};
    const a = 2; 
    if (a > 1) {   // the actual line is obviously different, I am trying to simplify the example
      tabs = { RequestStack, ManageStack, MessagesStack, ProfileStack };
    } else {
      tabs = { WorkStack, ManageStack, MessagesStack, ProfileStack };
    }

    console.log('in _tabNavigator. this.props.navigation:');
    console.log(this.props.navigation);
    return createBottomTabNavigator(tabs, {
        headerMode: 'none',
    });
  }

  render() {
    const Tabs = this._tabNavigator.bind(this)();
    return (
      <Tabs/>
    );
  }
}

这是DynamicTabNavigator的console.log()输出:

in _tabNavigator. this.props.navigation:
 Object {
   "actions": Object {
     "closeDrawer": [Function closeDrawer],
     "goBack": [Function goBack],
     "navigate": [Function navigate],
     "openDrawer": [Function openDrawer],
     "setParams": [Function setParams],
     "toggleDrawer": [Function toggleDrawer],
   },
   "addListener": [Function addListener],
   "closeDrawer": [Function anonymous],
   "dangerouslyGetParent": [Function anonymous],
   "dispatch": [Function anonymous],
   "getChildNavigation": [Function getChildNavigation],
   "getParam": [Function anonymous],
   "getScreenProps": [Function anonymous],
   "goBack": [Function anonymous],
   "isFocused": [Function isFocused],
   "navigate": [Function anonymous],
   "openDrawer": [Function anonymous],
   "router": undefined,
   "setParams": [Function anonymous],
   "state": Object {
     "key": "Main",
     "params": undefined,
     "routeName": "Main",
   },
   "toggleDrawer": [Function anonymous],
 }

当DynamicTabNavigator到位时,这是来自Profile的console.log()的输出:

(我希望所有道具,例如openDrawer,与DynamicTabNavigator相同,我不明白它们为什么不是)

 in Profile. this.props:
 Object {
   "appMode": "WORK_MODE",
   "dispatch": [Function anonymous],
   "navigation": Object {
     "actions": Object {
       "dismiss": [Function dismiss],
       "goBack": [Function goBack],
       "navigate": [Function navigate],
       "pop": [Function pop],
       "popToTop": [Function popToTop],
       "push": [Function push],
       "replace": [Function replace],
       "reset": [Function reset],
       "setParams": [Function setParams],
     },
     "addListener": [Function addListener],
     "dangerouslyGetParent": [Function anonymous],
     "dismiss": [Function anonymous],
     "dispatch": [Function anonymous],
     "getChildNavigation": [Function getChildNavigation],
     "getParam": [Function anonymous],
     "getScreenProps": [Function anonymous],
     "goBack": [Function anonymous],
     "isFocused": [Function isFocused],
     "navigate": [Function anonymous],
     "pop": [Function anonymous],
     "popToTop": [Function anonymous],
     "push": [Function anonymous],
     "replace": [Function anonymous],
     "reset": [Function anonymous],
     "router": undefined,
     "setParams": [Function anonymous],
     "state": Object {
       "key": "id-1547113035295-8",
       "routeName": "Profile",
     },
   },
   "screenProps": undefined,
 }

关于@ dentemm解决方案的问题:

我不确定如何实施您的解决方案......

• 让我们说我TabRoutes在你的例子中指定的三个屏幕中
• 在我的redux状态下,我有一个名为'appState'的变量.如果是真的我想显示第一个和第二个,如果是第一个和第三个.

• 这是我根据你的例子编写的代码.但是,我不确定包含哪个组件CustomTabBar.你能详细说说吗？

  import React from 'react';
  class CustomTabBar extends React.Component {
  
  render() {
  // a tab bar component has a routes object in the navigation state
  const { navigation } = this.props;
  
    // appState is extracted from redux state, see below
    if (this.props.appState) {
      return (
        <View>
          <???
            name='First'
            onPress={this.navigationHandler}
            focused={navigation.state.index === index}
          />
          <???
            name='Second'
            onPress={this.navigationHandler}
            focused={navigation.state.index === index}
          />
        </View>
      );
    } else {
      return (
        <View>
          <???
            name='First'
            onPress={this.navigationHandler}
            focused={navigation.state.index === index}
          />
          <???
            name='Third'
            onPress={this.navigationHandler}
            focused={navigation.state.index === index}
          />
        </View>
        );
      }
    }
  
    navigationHandler = (name) => {
      const {navigation} = this.props;
      navigation.navigate(name);
    }
  }
  
  const mapStateToProps = state => {
   const { appState } = state.app;
   return { appState };
  };
  
  export default connect(mapStateToProps)(CustomTabBar);
  

Answer 1

您还可以保持 TabNavigator 不变，并使用自定义 TabBarItem 组件创建自定义 TabBar 组件。您可以将该自定义 TabBar 连接到您的 redux 状态，并根据您的需要隐藏/显示自定义 TabBarItems。

然后您只需像往常一样将所有可能的路由添加到 TabNavigator。

路线

const TabRoutes = createBottomTabNavigator({
  First: {screen: SomeScreen},
  Second: {screen: SomeStack},
  Third: {screen: AnotherStack}
},{
  initialRouteName: 'First',
  tabBarComponent: CustomTabBar
});

自定义标签栏

关于如何隐藏标签栏项目的一些基本示例，因此显然这需要根据您自己的要求进行调整

import CustomTabBarItem from '...'  ; 

class CustomTabBar extends React.Component {

  render() {

    // a tab bar component has a routes object in the navigation state
    const {navigation, appState} = this.props;
    const routes = navigation.state.routes;

    return (
      <View style={styles.container}>
        // You map over all existing routes defined in TabNavigator
        {routes.map((route, index) => {

              // This could be improved, but it's just to show a possible solution
              if (appState && route.routeName === 'x') {
                return <View/>;
              } else if (!appState && route.routeName === 'y') {
                return <View/>;
              }

              return (<CustomTabBarIcon
                key={route.key}
                name={route.routeName}
                onPress={this.navigationHandler}
                focused={navigation.state.index === index}
                appState={appState}
              />);
        })}
      </View>
    );
  }

  navigationHandler = (name) => {

    const {navigation} = this.props;
    navigation.navigate(name);
  }
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flexDirection: 'row'
  }
})

const mapStateToProps = (state) => {
  return {
    appState: state.app.appState // boolean
  };
};

export default connect(mapStateToProps)(CustomTabBar);

自定义标签栏项

class CustomTabBarItem extends React.PureComponent {
  render() {

    const {name, focused} = this.props;

    return (
      <View style={styles.tabItem}>
        // Some icon maybe
        <Text style={/*different style for focused / unfocused tab*/}>{name}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  tabItem: {
    flex: 1
  }
})