javascript – 将道具传递给动态TabNavigator

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

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

这是我的顶级导航器：

export default createDrawerNavigator({
    Drawer: MainDrawerNavigator,Main: MainTabNavigator
},{
  contentComponent: props =>


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

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

Profilestack.navigationoptions = {
  tabBarLabel: 'Profile',tabBarIcon: ({ focused }) => (
    ottomTabNavigator({
  RequestStack,Profilestack
},{
    headerMode: 'none',initialRouteName: Profilestack
});

和配置文件屏幕：

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 (
        

单击“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,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 (
      

这是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","navigation": Object {
     "actions": Object {
       "dismiss": [Function dismiss],"pop": [Function pop],"popToTop": [Function popToTop],"push": [Function push],"replace": [Function replace],"reset": [Function reset],"dismiss": [Function anonymous],"pop": [Function anonymous],"popToTop": [Function anonymous],"push": [Function anonymous],"replace": [Function anonymous],"reset": [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 (
      etoProps = state => {
 const { appState } = state.app;
 return { appState };
};

export default connect(mapStatetoProps)(CustomTabBar);


最佳答案
您也可以保留TabNavigator,并使用自定义TabBarItem组件创建自定义TabBar组件.您可以将该自定义TabBar连接到redux状态,并根据需要隐藏/显示自定义TabBarItems.
然后,您只需像往常一样将所有可能的路线添加到TabNavigator.
路线

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

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 (
      Could be improved,but it's just to show a possible solution
              if (appState && route.routeName === 'x') {
                return etoProps = (state) => {
  return {
    appState: state.app.appState // boolean
  };
};

export default connect(mapStatetoProps)(CustomTabBar);

CustomTabBarItem

class CustomTabBarItem extends React.PureComponent {
  render() {

    const {name,focused} = this.props;

    return (
      



                
                                原文地址：https://www.jb51.cc/js/429293.html
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascript – 将道具传递给动态TabNavigator

相关推荐