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

因为您尝试在navigation中使用renderHeader，并且在注册屏幕文件中没有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