如何在标题上添加按钮？ （反应本机）

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