从反应原生底部选项卡导航器的标题导航

Posted 2023-02-22

【中文标题】从反应原生底部选项卡导航器的标题导航

【英文标题】：Navigation from the header of the bottom tab navigator in react native

【发布时间】：2020-03-19 19:35:18

【问题描述】：

我在 react native 的 react-navigation 堆栈导航器中使用底部选项卡导航器。当堆栈到达底部选项卡导航器时，我想从标题的左侧或右侧元素导航。我添加了左右按钮，但是当我尝试导航时，它给了我错误，我的导航器如下。

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);

这是底部标签导航器

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',
    
  ,


);

如何从标题导航？

【参考方案1】：

因为您尝试在renderHeader 中使用navigation 并且在注册屏幕文件中没有navigation，所以让我们试试这个而不是在那个文件中定义，我们在导航器组件中定义它。

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>
          ),
        ;
      ;
    

官方文档here