0

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

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'

});

如您所见，我在标题中使用了一个组件 HeaderRight，其中包含一些图标 - 设置 cog、配置文件等。我希望能够从这些图标的 TouchableOpacity onPress 方法中导航。但是该组件中缺少导航道具“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; }} />
    );
  }
}

我无法在我的示例中看到它是如何工作的。有人可以帮忙吗？谢谢

巨大的

4

2 回答 2

1

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

navigationOptions: {
            header: (navigation) => {
                return {
                  style: {
                    backgroundColor: Colors.bgBrand,
                    elevation: null,
                  },
                  titleStyle: {
                     color: Colors.lightest
                  },
                  right: (<HeaderRight
                             navigation={navigation}
                          />),
               };
           },
},
于 2017-03-21T12:44:25.397 回答
0

我不知道这是否有帮助，我正在研究为什么我的电话在反应导航中也不起作用。但是你的大括号在你的例子中搞砸了。您在导航选项中有初始路线名称，这可能是正确的，但您的缩进显示了另一个故事......

于 2017-07-27T14:20:28.410 回答