react-native - 如何在(嵌套的)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;

除了其他来源，到目前为止，我查阅了以下网站:

headers 上的文档和 header buttons

github discussion on a react-navitation issue

howto on modifying headers另一个在 customer headers with react-navigation .后者似乎是一个很好的起点。

Answer 1

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

你有一个 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;

我用过 the <Icon /> component来自 react-native-elements。您可以通过给它们一个 onPress 来使这些图标可点击。 Prop 。

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



无耻插头:
如果你想了解更多关于 React Navigation you might like my tutorial在其中，我将指导您构建具有生产就绪导航设置的应用程序。