React Navigation：顶级组件缺少道具

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，其中包含一些图标 - 设置齿轮、配置文件等。我希望能够从这些图标的 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; }} />
    );
  }
}

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

巨大

Answer 1

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

传递给 HeaderRight 组件

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

Answer 2

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

React Navigation：顶级组件缺少道具

React Navigation: Missing prop at top level component

android

ios

reactjs

react-native

react-navigation