在 React Native 中從底部選項卡導航器的標題導航

Question

我在 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',
    }
  },
}

);

如何從標題導航？

Answer 1

因為您嘗試在renderHeader使用navigation並且在注冊屏幕文件中沒有navigation ，所以讓我們試試這個而不是在那個文件中定義，我們在 Navigator 組件中定義它。

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

官方文檔在這里