如何在（嵌套的）StackNavigator中实现自定义标题图标？

Question

这可能是一个讨厌的问题，但是尽管我阅读了文档和其他资源，但仍然没有弄清楚如何在StackNavigator的标题中实现两个或更多其他可单击的图标，就像图片一样。如果stackNavigator要显示一个后图标，则允许他覆盖菜单图标。

这是（根）主屏幕的外观。用户开始单击内容后，应将菜单项替换为stackNavigator中的后退按钮（最好在任何平台上）。

到目前为止的工作：我从全新的模板开始，通过tabs在运行时选择选项来进行操作expo init。我对MainTabNavigator.js文件做了一些小的修改

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import CustomHeader from '../components/CustomHeader';
import HomeScreen from '../screens/HomeScreen';    

const HomeStack = createStackNavigator( { Home: HomeScreen }, {
   // default config for screens in the stack, so `Home` will use this title 
  navigationOptions: { 
    title: 'Protype Prompter: Browse',
    header: props => <CustomHeader {...props} />,
    }}
);
// All other code stays like provided by expo init.
export default createBottomTabNavigator({
  HomeStack,
});

接下来，我确保在HomeScreen.js中，标题不会被覆盖：

export default class HomeScreen extends React.Component {
  /* static navigationOptions = {
    header: null,
  }; */

请帮我使用CustomHeader.js。到目前为止，我的所有努力并未在主屏幕上导致任何可见的更改。

import React from "react";
import { Header } from "react-navigation";
import { View, Platform, Image, StyleSheet } from "react-native";
import { SimpleLineIcons } from '@expo/vector-icons'; 
const CustomHeader = props => {
  return (
    <View>
        <SimpleLineIcons name="menu" size={24} color={tintColor} />
         <Header headerLeft={<SimpleLineIcons name="menu" size={24} color='#6a1b9a' />} {...props} />
    </View>
  );
};
export default CustomHeader;

除了其他来源，到目前为止，我还访问了以下网站：

1. 标头和标头按钮的文档
2. 一个在github上讨论反应，导航中的问题
3. 一本关于如何修改标题的howto方法，另一本是关于与客户标题有关的react-navigation方法。后者似乎是一个很好的起点。

Answer 1

这实际上很容易。考虑到您使用的是 React Navigation V2 或 V3，请查看createStackNavigator文档。

在那里你有一个headerLeft和 一个headerRight都可以采用自定义组件的设置。因此，您可以轻松地编写示例标题。

编辑

所以我快速编写了一个例子：

在您的App.js：

import React, { Component } from "react";
import Navigator from "./navigation/navigation";

export default class App extends Component {
  render() {
    return <Navigator />;
  }
}

navigation.js：

import { createStackNavigator } from "react-navigation";
import HomeScreen from "../screens/HomeScreen";

const RootStack = createStackNavigator({ HomeScreen });

export default RootStack;

现在，您可以逐个屏幕地设计标题，如下所示：

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-navigation";
import { Icon } from "react-native-elements";

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  icon: {
    paddingLeft: 10
  },
  iconContainer: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    width: 120
  }
});

export class HomeScreen extends Component {
  static navigationOptions = {
    title: "Title",
    headerLeft: (
      <Icon
        containerStyle={styles.icon}
        type="ionicon"
        name={Platform.OS === "ios" ? "ios-menu" : "md-menu"}
      />
    ),
    headerRight: (
      <View style={styles.iconContainer}>
        <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-search" : "md-search"} />
        <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-heart" : "md-heart"} />
        <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-more" : "md-more"} />
      </View>
    )
  };

  render() {
    return (
      <SafeAreaView styles={styles.container}>
        <Text>Hi from the HomeScreen.</Text>
      </SafeAreaView>
    );
  }
}

export default HomeScreen;

我用的<Icon />组分从反应天然元素。您可以通过给它们一个onPress道具来使这些图标可点击。

这是iOS上结果的屏幕截图：

无耻插件： 如果您想了解更多关于 React Navigation 的信息，您可能会喜欢我的教程，我将指导您构建具有生产就绪导航设置的应用程序。