在React Native上使用StackNavigator加载自定义标头

Question

我有一个Header组件，我在React Native中用作静态appbar。现在，我正在尝试包含StackNavigator，以便更轻松地管理屏幕之间的转换。

我的问题是我无法在Header标题中包含我的StackNavigator组件。我目前的代码和结果如下所示：

const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;

const GiftNavigator = StackNavigator(
{
  All: {
    screen: GiftListSection,
    navigationOptions: {
      tabBarLabel: 'All',
    }
  },
  Reclaim: {
    screen: GiftReclaimSection,
    navigationOptions: {
      tabBarLabel: 'Reclaim',
    }
  }
}, {
  headerMode: 'float',
    header: (
        <View style={{ height: APPBAR_HEIGHT }}>
            <Header />
        </View>
    )
});

请注意，未加载Header。这只是一个空白区域。如何将Header组件加载到StackNavigator标题？如果我加载自己的Header，它是否会包含默认导航器标题中的后退按钮？

Answer 1

您可以尝试这样：

export default class YourScreen extends Component {

  static navigationOptions = {
    header: <YourHeader/>,
  };
  ...
}

或：

const GiftNavigator = StackNavigator(
{
  All: {
    screen: GiftListSection,
    navigationOptions: {
      tabBarLabel: 'All',
      header: <YourHeader/>,
    }
  },
  Reclaim: {
    screen: GiftReclaimSection,
    navigationOptions: {
      tabBarLabel: 'Reclaim',
      header: <YourHeader/>,
    }
  }
}

希望这可以帮到你！

Answer 2

您可以使用headerMode: 'none'选项完全隐藏默认反应导航标题，并为每个组件自行处理标题。

或者您可以使用header属性并加载自己的自定义标头组件：

navigationOptions: {
  header: props => <CustomHeader {...props} />,
},