javascript – 将道具传递给动态TabNavigator

前端之家收集整理的这篇文章主要介绍了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 }) => (
    

配置文件屏幕:

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 (
      
最佳答案
您也可以保留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 (
      

CustomTabBarItem

class CustomTabBarItem extends React.PureComponent {
  render() {

    const {name,focused} = this.props;

    return (
      
原文链接:https://www.f2er.com/js/429293.html

猜你在找的JavaScript相关文章