如何在标题上添加按钮？ （React Native）

Question

如何在右上方的标题栏上添加按钮？ 我希望该按钮打开我的页面“ Parametres”吗？

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

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

您需要将标题按钮添加到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

Answer 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