reactjs - 在 React Navigation 中使用组件作为标题标题

Question

我正在尝试将一个组件作为我的堆栈导航器标题标题。这是代码:

const Test = ({ navigation }) => {
  return (
    <View>
      <Text>Test1</Text>
      <Text>Test2</Text>
    </View>
  );
};

const stackNav = createStackNavigator(
  {
    ProductionList: {
      screen: List,
      navigationOptions: {
        header: {
          title: <Test />
        }
      }
    },
    ProductionBoard: {
      screen: Board
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: colors.dark
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

我收到以下错误:

TypeError: renderHeader is not a function

This error is located at:
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:58)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:146)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:96)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at createTabNavigator.js:10)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:14)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:10)
    in ResourceSavingScene (at createBottomTabNavigator.js:83)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:74)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:73)
    in TabNavigationView (at createTabNavigator.js:91)
    in NavigationView (at createNavigator.js:96)
    in Navigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:96)
    in Navigator (at createNavigationContainer.js:393)
    in NavigationContainer (at App.js:56)
    in RCTSafeAreaView (at SafeAreaView.ios.js:34)
    in SafeAreaView (at AppContainer.js:30)
    in AppContainer (at App.js:55)
    in App (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

关于如何解决这个问题有什么想法吗？

Answer 1

您应该使用 headerTitle 而不是 header: { title。

navigationOptions: {
  headerTitle: // your custom component here
}