Question

我正在使用 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??
     ]

    })

Answer 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'
        }

Answer 2

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

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

  ...
}

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

2 个答案: