如何在表头添加按钮？（反应原生）答案

【问题标题】：How to add a button on the header ? (React Native)如何在表头添加按钮？（反应原生）
【发布时间】：2018-11-21 18:50:12
【问题描述】：

如何在右上角的标题栏上添加一个按钮？我想要那个按钮打开我的页面“参数”？

（我不希望我的“参数”页面位于底部选项卡上。）

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”页面。我是新手，任何帮助将不胜感激。

【问题讨论】：

标签： javascript react-native tabs react-navigation navigationbar

【解决方案1】：

需要在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

【讨论】：

谢谢，但文本带有红色下划线我的代码有一些文本错误.. :/
NVM 我看到了问题，再试一次。编辑了我的回复。

【解决方案2】：

试试这个：

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

【讨论】：

只需从您的代码中删除 HomeStack 和 HomeStack.navigationOptions 并替换为我的
没有出现任何按钮，唯一的问题是 HomeStack 按钮已经从我的栏标签中消失了。