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

Question

我有一个Header组件，用作 React Native 中的静态应用栏。现在我正在尝试添加一个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/>,
    }
  }
}

希望这可以帮到你！