如何使用 react-native-navigation 在标题中显示图像？答案

【问题标题】：How to Display Image in header using react-native-navigation?如何使用 react-native-navigation 在标题中显示图像？
【发布时间】：2018-03-20 09:10:19
【问题描述】：

我正在使用 react-native-navigation 的 startTabBasedApp 组件来构建我的选项卡。在我的主页选项卡中，我需要在标题左侧显示一个图像/徽标。我在下面给出了我的代码。

Navigation.startTabBasedApp({
   tabs: [
      {
      label: "Home",
      title: "Home",
      screen: "awesome-Navigation.FindPlace",
      icon: sources[0], //from my source obj
      navigatorStyle: {
        navBarBackgroundColor: '#535492',
        navBarTextColor: 'white'
      }
     //is there any way to add image using navigationoptions inside this??
     ]

    })

【问题讨论】：

据我所知，您必须为此设置一个自定义组件。但我可能错了
我有任何内置属性可以在标题中显示图像吗？？
您可以在 navigationOptions 中使用 header 属性，并在该属性中提供自定义组件。
例如在我使用的屏幕左侧显示一个图标。 static navigationOptions = ({ navigation }) => ({ headerLeft: ( navigation.navigate('LoginPage', { index: 1 })}>) });

标签： reactjs react-native react-native-navigation

【解决方案1】：

你可以使用tabIcon属性

navigationOptions: () => ({
            title: 'Contact Us',
            headerStyle: { backgroundColor: '#191565' },
            headerTintColor: '#FFF',
            tabBarIcon:(<Icon name='navigate-before'  size={40} color={'white'} />)

        }

并在tabBarOptions下面启用

设置showIcon:true

并将tabStyle的flexDirection设置为row

tabStyle: {
          flexDirection:'row'
        }

【讨论】：

【解决方案2】：

您可以在屏幕组件中使用 headerLeft。 headerLeft 必须在 navigationOptions 中声明：

class ScreenComponent extends React.Component {
   static navigationOptions = () => {
      return {
         headerLeft: <MaterialIcons .... /> // --> Your Icon
      }
   }

  ...
}

【讨论】：