android - react 导航 : Missing prop at top level component

Question

我按以下方式设置了堆栈导航器

const wishlizt = StackNavigator({
        Splash: {screen: SplashScreen},
        SignIn: {screen: SignInScreen},
        SignUp: {screen: SignUpScreen},
        Profile: {screen: ProfileScreen},
        Home: {screen: MainScreenNavigator},
        Chat: {screen: ChatScreen}
    },
    {
        navigationOptions: {
            title: 'Wishlizt',
            header: {
                style: {
                    backgroundColor: Colors.bgBrand,
                    elevation: null,
                },
                titleStyle: {
                    color: Colors.lightest
                },
                right: <HeaderRight />
            }
    },
        initialRouteName: 'Splash'

});

如您所见，我在 header 中使用了一个组件 HeaderRight，其中包含一些图标 - 设置齿轮、配置文件等。我希望能够从这些图标的 TouchableOpacity onPress 方法进行导航。但该组件中缺少导航 Prop “this.props.navigation”。

官方文档页面有关于如何在顶级组件上调用导航的代码示例，并建议使用“ref”

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
  }
  render() {
    return (
      <AppNavigator ref={nav => { this.navigator = nav; }} />
    );
  }
}

我看不出这在我的例子中是如何工作的。有人可以帮忙吗？谢谢

巨大

Answer 1

header 属性可以是函数也可以是对象。当它是一个函数时，navigation对象作为第一个参数传入，然后可以作为prop传递给HeaderRight组件.

navigationOptions: {
            header: (navigation) => {
                return {
                  style: {
                    backgroundColor: Colors.bgBrand,
                    elevation: null,
                  },
                  titleStyle: {
                     color: Colors.lightest
                  },
                  right: (<HeaderRight
                             navigation={navigation}
                          />),
               };
           },
},