Question

我有如下这样的tabBarNavigation自定义标题：

import HeaderTab from './HeaderTab/HeaderTab';

  TabNavigator: {
    screen: TabNavigator,
    navigationOptions: {
      header: (
    <HeaderTab/>

  ),
    }
  },

HeaderTab组件的

代码：

import React, {Component} from 'react';
import {StyleSheet, Text, View, FlatList, TouchableOpacity, TextInput, ActivityIndicator } from 'react-native';
import Styles from './Styles';
import {withTranslation} from 'react-i18next';

export class HeaderTab extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      test:  i18n.dir(),

    }
  }
  render() {
    const { t, i18n } = this.props;

    return (


                <View style={Styles.container}>

                  <View style={Styles.header}>
                    <View style={Styles.ic1Container}>
                      <TouchableOpacity style={Styles.buttonHeaderStyle}>
                        <IconII name="ios-arrow-back"/>
                      </TouchableOpacity>
                      <TouchableOpacity
                      style={Styles.buttonHeaderStyle}
                      onPress={() => **this.props.navigation.openDrawer()**}>
                        <IconAD name="menuunfold"/>
                      </TouchableOpacity>
                    </View>

                    <View style={Styles.ic2Container}>
                      <TouchableOpacity style={Styles.buttonHeaderStyle}>
                        <IconAD  name="camerao"/>
                      </TouchableOpacity>
                    </View>
                  </View>
                  <View style={Styles.infosMt}>
                   {...}
                  </View>
             </View>
    );
  }
}
export default withTranslation(['HeaderTab', 'common'], { wait: true })(HeaderTab);

我想像在其他所有视图中一样打开抽屉：this.props.navigation.openDrawer()，但是有一个错误this.props.navigation未定义，所以我从props传递了它：

  TabNavigator: {
    screen: TabNavigator,
    navigationOptions: {
      header: (
    <HeaderTab navigation = {this.props.navigation}/>
  ),
    }
  },

在标头组件中：

  render() {
    const { t, i18n } = this.props;
    const navigation = this.props.navigation;
    {... some code}
                      <TouchableOpacity
                      style={Styles.buttonHeaderStyle}
                      onPress={() => navigation.openDrawer()}>
                        <IconAD name="menuunfold"/>
                      </TouchableOpacity>
}

刷新应用程序时出现错误：undefined is not an object (evaluating 'this.props.navigation')

PS1。 Header组件位于TabBarNavigation的{{1}} 中 PS2。 stackNavigation适用于this.props.navigation.openDrawer()

中的所有屏幕

Answer 1

Header组件位于TabBarNavigation中，也位于stackNavigation中

this.props.navigation.openDrawer（）在stackNavigation的所有屏幕中均可使用

然后将this.props.navigation从stackNavigation传递到TabBarNavigation到Header

Answer 2

您需要创建一个抽屉式导航器，然后将其添加到您的根导航器中。您可以通过添加自定义组件contentComponent: SideMenu

自定义侧面导航

import React from 'react'
import {createDrawerNavigator} from 'react-navigation'
import AppNavigator from './AppNavigator'
import AboutUs from '../../views/Static/About'
import SideMenu from '../../components/SideMenu'

const SCREEN_WIDTH = Dimensions.get('window').width

const DrawerNavigator = createDrawerNavigator(
  {
    Home: {screen: AppNavigator},
    AboutUs: {screen: AboutUs},
  },
  {
    contentComponent: SideMenu,
    drawerWidth: SCREEN_WIDTH * 0.83
  }
)

DrawerNavigator.navigationOptions = ({navigation}) => ({
  header: null
})

export default DrawerNavigator

现在，您可以在根导航器中将此抽屉导航器添加为：

import {createStackNavigator, createAppContainer} from 'react-navigation'
import LoginNavigator from './LoginNavigator'
import DrawerNavigator from './DrawerNavigator'

const RootStack = createStackNavigator(
  {
    Login: {screen: LoginNavigator},
    Drawer: {screen: DrawerNavigator}
  },
  {
    initialRouteName: 'Drawer'
  }
)

export default createAppContainer(RootStack)

现在按下this.props.navigation.openDrawer()，您就可以打开DrawerNavigator。

Answer 3

根导航：我有4个导航： authFlowNavigation：switchNavigator DrawerNavigation：drawerNavigator MainStackNavigation：stackNavigator TabBarNavigation：tabBarNavigator

switchNavigation的代码（Root导航）：

import React, {Component} from 'react';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';

import DrawerNavigation from './DrawerNavigation';
import MainNavigation from './MainStackNavigation';
import ActNavigation from './ActivationStackNavigation';
import TabBarNav from './TabBarNavigation';


const AuthFlowNavigation = createSwitchNavigator({
  SplashBOX: SplashScreen,
  Drawer: DrawerNavigation,
  ActBOX: ActNavigation,
  MainBOX: MainNavigation,
  TabBarNav: TabBarNav,
})

export default createAppContainer(AuthFlowNavigation)

抽屉导航代码：

imports...
var width = Dimensions.get('window').width;

const DrawerNavigation = createDrawerNavigator({

      MainStack: {
        screen: MainStackNavigation,
      },
  },
  {
    drawerWidth: width*0.83,
    contentComponent: props =>
    {
      return(<DrawerComponent {...props}/>)
    },
    drawerPosition: 'left',
  },

  );
export default createAppContainer(DrawerNavigation)

stackNavigation包含tabBarNavigation！

Answer 4

我刚刚找到了解决方案！看看documentation ...

安装软件包“ @ react-navigation / native ”，导入“ useNavigation ”并将其实例化为默认功能，就像我在下面的代码中所做的一样。

#define MAX(a,b,c) \
    (((a>b) && (a>c))? a : ((b>a) && (b>c))? b : c ))

tabBarNavigation标题中的菜单按钮：无法调用this.props.navigation.openDrawer（）;

4 个答案: