在 React Native 中从底部选项卡导航器的标题导航

Question

I am using bottom tab navigator inside stack navigator of react-navigation in react native. I want to navigate from the left or right element of the header when the stack comes to the bottom tab navigator. I added the left and right button but when I am trying to navigate it gives me error my navigators are as follow.

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import FIcon from 'react-native-vector-icons/FontAwesome5';
import { TouchableOpacity, View } from 'react-native';
import AIcon from 'react-native-vector-icons/AntDesign';




import React from 'react';
import Login from './src/component/Login/Login';
import Registration from './src/component/Registration/Registration';
import Navigator from './src/component/AfterLogingIn/AfterLoginRoute';
import ChatDashboard from './src/component/AfterLogingIn/Chat/Chatboard';

const navigator = createStackNavigator({
  login: {
    screen: Login,
    navigationOptions: {
      header: null,
    },
  },
  registration: {
    screen: Registration,
    navigationOptions: {
      header: null,
    },
  },
  Navigator: {
    screen: Navigator,
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#192a56'
      },

      headerRight: (
        <View style = {{flexDirection: 'row'}}>
          <TouchableOpacity style={{ marginRight: 20 }}
          >
            <FIcon name='search' style={{ color: 'grey' }} size={25} />
          </TouchableOpacity>
          <TouchableOpacity style={{ marginRight: 10 }}
            onPress={() => this.navigation.navigate('ChatDashboard')}
          >
            <AIcon name='message1' style={{ color: 'grey' }} size={25} />
          </TouchableOpacity>
        </View>
      ),
    }
  },
  SignOut: {
    screen: Profile,
  },
  ChatDashboard: {
    screen: ChatDashboard,
  },
},

  {
    initialRouteName: 'login',
  }
);

// Export it as the root component
export default createAppContainer(navigator);

Here is the bottom tab navigator

const TabNavigator = createBottomTabNavigator({
  posts:{
    screen: Posts,
    navigationOptions: {
      title: 'ABC',
      tabBarLabel: 'Posts',
      tabBarIcon: ({tintColor}) =>(
        <MCIcon name='calendar-text' color = {tintColor} size = {25} />
      )
    }
  },
  events: {
    screen: Events,
    navigationOptions:{
      tabBarLabel: 'Events',
      tabBarIcon: ({tintColor}) =>(
        <MIcon name = 'event' color = {tintColor} size = {25} />
      )
    }
  },
  addPost:{
    screen: AddPost,
    navigationOptions:{
      tabBarLabel: 'Add Post',
      tabBarIcon: ({tintColor}) =>(
        <FIcon name="plus-square" color={tintColor} size = {25} />
      )
    }
  },
  alumniStory: {
    screen: AlumniStory,
    navigationOptions:{
      tabBarLabel: 'Alumni Story',
      tabBarIcon: ({tintColor}) =>(
        <FIcon name = 'book-reader' color = {tintColor} size = {25} />
      )
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      tabBarLabel: 'Profile',
      tabBarIcon: ({tintColor}) =>(
        <FIcon name = 'user' color= {tintColor} size = {25}  />
      )
    }
  },
},

{
  swipeEnabled: true,
  tabBarOptions: {
    style: {
      backgroundColor: '#192a56',
    }
  },
}

);

How do I navigate from header?

Answer 1

Because you try using navigation in renderHeader and don't have navigation in register screen file, so let try this instead of defined in that file, we defined it in the Navigator component.

class Navigator extends React.Component {
      static navigationOptions = ({ navigation, navigationOptions }) => {
        return {
          headerStyle: {
            backgroundColor: '#192a56'
          },
          headerRight: (
            <View style = {{flexDirection: 'row'}}>
              <TouchableOpacity style={{ marginRight: 20 }}
              >
                <FIcon name='search' style={{ color: 'grey' }} size={25} />
              </TouchableOpacity>
              <TouchableOpacity style={{ marginRight: 10 }}
                onPress={() => navigation.navigate('ChatDashboard')}
              >
                <AIcon name='message1' style={{ color: 'grey' }} size={25} />
              </TouchableOpacity>
            </View>
          ),
        };
      };
    }

Offical docs here