Как добавить кнопку в шапку?(Реагируй Родной)

Question

Как добавить кнопку на панели заголовка в правом верхнем углу?Я хотел бы, чтобы эта кнопка открывала мою страницу "Параметры"?

(я не хочу, чтобы моя страница "Параметры" находилась на нижней вкладке.)

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import Parametres from '../screens/Parametres';


const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }/>),};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Linkscreen',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
    />),};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />),};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
  Parametres,
});

Это моя страница "MainTabNavigator.js".Я новичок, любая помощь будет очень признателен.

Answer 1

Попробуйте это:

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  navigationOptions: ({ navigation }) => ({
    headerRight: (
      <Button
        title="Parametres"
        onPress={() => navigation.navigate('Parametres')}
      />
    ),
    tabBarLabel: 'Home',
    tabBarIcon: ({ focused }) => (
      <TabBarIcon
        focused={focused}
        name={
          Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
        }
      />
    ),
  }),
});

Вы можете удалить HomeStack.navigationOptions с этим

Answer 2

Вам нужно добавить кнопку заголовка в navigationOptions

Вы можете сделать это следующим образом:

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, Button } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
import Parametres from '../screens/Parametres';


const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
headerRight: <Button
    onPress={() => this.props.navigation.navigate('Parametres')}
    title="Parameters"
    color="#fff"
/>,
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
<TabBarIcon
  focused={focused}
  name={
    Platform.OS === 'ios'
      ? `ios-information-circle${focused ? '' : '-outline'}`
      : 'md-information-circle'
  }/>),};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

LinksStack.navigationOptions = {
  tabBarLabel: 'Linkscreen',
  tabBarIcon: ({ focused }) => (
<TabBarIcon
  focused={focused}
  name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
/>),};

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
<TabBarIcon
  focused={focused}
  name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>),};

export default createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
  Parametres,
});

Примечание: я предполагаю, что вы называете маршрут Parametres