如何使用react-native-navigation在头部显示图片？（基于startTabBasedApp组件）

嘿，我来帮你搞定这个需求！你确实可以通过navigationOptions来实现标题左侧加Logo的效果，但不是直接在startTabBasedApp的tabs配置里添加，而是要在对应的屏幕组件（也就是你的awesome-Navigation.FindPlace）中去定义navigationOptions。下面给你两种常见组件类型的实现方式：

1. 类组件的实现方式 #

如果你的FindPlace是类组件，可以直接在组件内部定义静态的navigationOptions属性：

import React, { Component } from 'react';
import { View, Image } from 'react-native';

class FindPlace extends Component {
  // 定义导航栏配置
  static navigationOptions = {
    title: "Home",
    // 标题左侧添加Logo
    headerLeft: () => (
      <Image
        source={require('./assets/your-logo.png')} // 替换成你的Logo资源路径，或者用你的sources[0]
        style={{ width: 30, height: 30, marginLeft: 15 }} // 调整大小和边距
      />
    ),
    // 导航栏样式（对应你原来的navigatorStyle）
    headerStyle: {
      backgroundColor: '#535492',
    },
    headerTintColor: 'white',
  };

  render() {
    return <View>{/* 你的组件内容 */}</View>;
  }
}

export default FindPlace;

2. 函数组件的实现方式 #

如果是函数组件，可以用useLayoutEffect配合navigation.setOptions来动态设置导航栏配置：

import React, { useLayoutEffect } from 'react';
import { View, Image } from 'react-native';

const FindPlace = ({ navigation }) => {
  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Home",
      headerLeft: () => (
        <Image
          source={require('./assets/your-logo.png')}
          style={{ width: 30, height: 30, marginLeft: 15 }}
        />
      ),
      headerStyle: {
        backgroundColor: '#535492',
      },
      headerTintColor: 'white',
    });
  }, [navigation]);

  return <View>{/* 你的组件内容 */}</View>;
};

export default FindPlace;

额外提醒 #

• 你原来在startTabBasedApp里设置的navigatorStyle可以移到组件的navigationOptions中统一管理，这样逻辑更清晰。
• 注意调整Logo的width、height和marginLeft样式，让它和标题的排版更协调。
• 如果你的Logo资源是通过sources[0]引入的，直接把source的值换成sources[0]即可，确保资源路径正确。

内容的提问来源于stack exchange，提问作者Srini