将导航器传递给标题

Question

我偶然发现了以下问题（Navigate to different screen from a button in a header）中发现的同一问题，该问题在Githb上重复。有关这些功能的文档位于here和here。

我尝试实施建议的解决方案但出现以下错误

Objects are not valid as React child (found: object with keys{right}). If you meant to render a collection of children, use an array instead.

如果你能帮助我，我将不胜感激。

违规成分：

class Bookings extends Component {
   state = {
     BookingsList: [],
    }
    static navigationOptions = {
      title: 'Bookings',
      headerStyle: {
       backgroundColor: '#49E841'
     },
     header:({ navigate }) => ({
       Right: (
        <HomeButton navigate={navigate}/>
        ),
      }),
    }
  //...More stuff that's not relevant
 }

 class HomeButton extends Component {
   render() {
   console.log(this.props)
   return (
   <TouchableHighlight
     onPress={() => this.props.navigate('Home')}
   >
     <View>
       <Image
          source={require('./Assets/home.png')}
       />
    </View>
  </TouchableHighlight>
  )}
 };

 const RallyMobileNavigator = StackNavigator({
   Home: { screen: RallyMobile },
   LogIn: { screen: LogIn },
   Bookings: { screen: Bookings},
   Menu: { screen: Menu },
   },{
    initialRouteName: 'Home',
    headerMode: 'screen'
  });

这是堆栈跟踪：