在 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
}

Answer 2

react-navigation 中的导航选项发生了一些变化，版本 2 现在采用不同的参数。

这个：

navigationOptions: {
        header: {
          title: <Test />
        }
      }

现在可以这样完成

navigationOptions: {
      header: <Test />
    }

或

navigationOptions: {
          headerTitle: <Test />
        }

Answer 3

如果您想使用自定义标头，请使用 react-navigation 进行此操作。

    static navigationOptions = {
          header : null
      };


    <View style={styles.header}>
             <TouchableOpacity
                  style={styles.backButton}
                  onPress={() => this.props.navigation.goBack()}>
                    <Image
                      source= 
                      {require("../../../../public/Assets/images/ArrowBack.png")}
                     />
           </TouchableOpacity>
           <Text style={styles.backTitle}>Title</Text>
        </View>


const styles = StyleSheet.create({
    header: {
        flexDirection: "row",
        backgroundColor: "#F5F5F5",
        paddingTop : Platform.OS == 'ios' ? 20 : 0,
    }

 backTitle: {
    fontFamily: Fonts.GothamMedium,
    fontSize: 20,
    marginLeft : 10,
    marginTop: Platform.OS === 'ios' ? 24 : 16,
    marginBottom: Platform.OS === 'ios' ? 20 : 19,
    color: "#414042",
  },
});