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'

});

正如您所看到的，我在标题中使用了一个组件HeaderRight，其中包含一些图标 - 设置cog，profile等。我希望能够从这些图标导航＃39; TouchableOpacity onPress方法。但导航道具＆＃39; this.props.navigation＆＃39;在该组件中缺失。

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

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对象作为第一个参数传入，然后可以作为HeaderRight传递给prop组件。

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

Answer 2

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

反应导航：在顶级组件中缺少道具

2 个答案: