Question

我正在尝试使用react-navigation和react-native-elements实现自定义导航抽屉。我还希望我的所有屏幕都有一个标题（有一个汉堡包可以控制抽屉）。我面临的问题是屏幕包括标题，而抽屉包括屏幕，但标题需要抽屉的点击事件。那么如何将抽屉对象传递给我的汉堡包（在标题组件内）？

文件UniversalHeader.js中的标题如下

    export default class UniversalHeader extends React.Component {
    render() {
    return (
      <Header
          leftComponent={{ icon: 'menu', color: '#ea0', onPress: () => this.props.navigation.navigate('DrawerToggle'), size: 50}}

          centerComponent={{ text: this.props.label, style: { color: '#fff' } }}
      />
    );
     }
   }

在我的主屏幕中，我有

import UniversalHeader from './UniversalHeader'

export default class HomeScreen extends React.Component {
  render() {
    return (
      <View>
        <UniversalHeader />
        <Text> cards go here </Text>
      </View>
    );
  }
}

然后在整理屏幕的编译脚本中，我有

import  HomeScreen  from './home';
    class customNav extends React.Component {

  render() {
    return (
        <View>
            <Avatar rounded xlarge source={require('./images/logo.png')} />

            <DrawerNavigatorItems navigation={{state: [{routeName: 'Home', key: '0'}]}}
                items={['Home', 'Discussions', 'Podcasts', 'Sermons', 'Events']}
                onItemPress={route => this.props.navigation.navigate(route)}

                renderIcon={(routeIcon) => (
                    <Image source={{uri: `./images/${routeIcon}.png`}} style={[styles.icon, {/*tintColor: tintColor*/}]} />
                )}
                getLabel={route => route.toString()}
            />
        </View>
    )
  }
} 


const MyApp = DrawerNavigator({
    Home: {
        screen: HomeScreen
    }
}, {drawerBackgroundColor: '#000', contentComponent:  customNav});

Header中的onPress方法leftComponent不知道导航器是谁，但我不知道如何从屏幕'home.js'或'UniversalHeader.js'获取它。

Answer 1

导航属性会自动添加到作为屏幕传递到任何反应导航组件的每个组件。因此，主动将this.props.navigation主屏幕组件传递给universalHeader即

<UniversalHeader navigation={this.props.navigation} />

您将为其提供了解所有已注册课程/屏幕的导航器（在这种情况下，传递到DrawerNavigator中）

如何将导航器传递给汉堡包菜单组件？

1 个答案: