在其他组件中反应本机反应导航变量答案

【问题标题】：React native react-navigation variable inside other component在其他组件中反应本机反应导航变量
【发布时间】：2017-12-10 15:41:09
【问题描述】：

在我的标题组件中，有一个菜单图标。当我按下图标时，它应该会打开 DrawerNavigation。

我已经尝试添加

const { navigate } = this.props.navigation;

但不幸的是，它并不能解决问题。

我的标题组件：

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from '../assets/stylesheets/theme';

export default class Header extends Component {
    render() {
        return (
            <View style={styles.header}>
                <Icon onPress={() => navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
}

我的主屏幕，我在其中导入标题组件：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

import Header from '../../components/header';

import styles from '../../assets/stylesheets/theme'

export default class HomeScreen extends Component {

    render() {
        return(
            <View style={styles.applicationView}>
                <Header />
                <Text>Home Screen</Text>
            </View>
        );
    }
}

This error appears when the icon inside the header is pressed

如何在标题组件中使用导航？提前致谢。

更新

头组件：

import React, { Component } from 'react';
import { View, Text, Image, Button } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from '../assets/stylesheets/theme';

export default class Header extends Component {
    render() {

        const { navigate } = this.props.navigation;

        return (
            <View style={styles.header}>
                <Icon onPress={this.props.navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
}

主屏幕：

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

import Header from '../../components/header';

import styles from '../../assets/stylesheets/theme'

export default class HomeScreen extends Component {

    render() {
        return(
            <View style={styles.applicationView}>
                <Header navigation={this.props.navigation} />
                <Text>Home Screen</Text>
            </View>
        );
    }
}

Error after update

【问题讨论】：

您是否尝试将导航传递给像这样<Header navigation={this.props.navigation} /> 的标题？
根据您的想法，我猜想我从标题中更改图标的 onPress 是这样的？ <Icon onPress={this.props.navigate('DrawerToggle')} name="md-menu" style={styles.headerIcon} />
您的Header 组件const { navigate } = this.props.navigation; 中已经有这一行，或者您可以将navigate 函数传递给您的Header，就像这样<Header navigate={this.props.navigation.navigate} /> 并按下图标将是onPress={this.props.navigate('DrawerToggle')}
请看我的问题，我更新了我的代码
您将navigation 传递给道具并在您的Icon on press 上执行this.props.navigate，这将为空。 on Press 应该是这样的<Icon onPress={this.props.navigation.navigate('DrawerToggle')} />。或者你可以只做<Icon onPress={navigate('DrawerToggle')} />，因为你的渲染函数中有这个const { navigate } = this.props.navigation;。应该这样做。

标签： javascript react-native react-navigation

【解决方案1】：

您需要像这样将导航对象传递给您的标题组件

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

你的标题组件现在应该是这样的

export default class Header extends Component {
    render() {
        return (
            <View style={styles.header}>
                <Icon onPress={this.openDrawer.bind(this)} name="md-menu" style={styles.headerIcon} />
                <Image source={require('../assets/images/f1today.png')} resizeMode="contain" style={styles.headerLogo} />
                <View style={{ flex: 1 }} />
            </View>
        )
    }
    openDrawer() {
      this.props.navigation.navigate('DrawerToggle');
    }
}

【讨论】：