如何将导航道具从父组件传递到标题? [英] How do I pass navigation props from parent component to header?

问题描述

我有4个页面:App.js，HomeScreen.js，Login.js，Toolbar.js

I have 4 pages: App.js, HomeScreen.js, Login.js, Toolbar.js

使用StackNavigator的我的应用"页面:

My App page with the StackNavigator:

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

import { StackNavigator, DrawerNavigator } from 'react-navigation';

import Splash from './screens/Splash';
import HomeScreen from './screens/HomeScreen';
import Login from './screens/Login';
import Lobby from './screens/Lobby';
import Wifi from './screens/Wifi';
import Toolbar from './components/ToolBar/Toolbar';
import Mobile from './screens/Mobile';


;

const Navigation = StackNavigator({
  Splash:{screen: Splash},
  HomeScreen:{screen: HomeScreen},
  Login:{screen: Login},
  Lobby:{screen: Lobby},
  Wifi:{screen: Wifi},
  Mobile:{screen:Mobile}
}, {
  mode: 'modal',
  headerMode: 'none'
});


export default Navigation;

我要将工具栏导入到HomeScreen，并希望将导航道具从HomeScreen传递到工具栏，以便可以从工具栏和HomeScreen访问登录页面.

I'm importing Toolbar to HomeScreen and would like to pass the navigation props from HomeScreen to Toolbar so that I can access the Login page from both the Toolbar and HomeScreen.

我的工具栏页面:

import React,{Component} from 'react';
import {Text, View, Button, StyleSheet, TouchableOpacity, 
    Dimensions,
    Image,ScrollView, Picker, FlatList} from 'react-native';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import config from '../../components/config/index';




class Toolbar extends Component{
    constructor(){
        super()
        this.state = {

        }
    }
    render(){
    //const {navigate} = this.props.navigation;
        return(
            <View style={styles.mainToolbar}>
                <View style={styles.containerForThree}>
                    <View style={styles.leftArrowContainer}>

                        <TouchableOpacity
                            onPress={()=>navigate('Login')}
                        >
                            <Text>hello</Text>

                        </TouchableOpacity>

                    </View>

截至目前，我已经将const navigation注释掉了，因为HomeScreen出现后将无法加载.

As of now, I have const navigate commented out because HomeScreen won't load if it's appears.

主屏幕:

import React,{Component} from 'react';
import {
    AppRegistry, StyleSheet, Text, View, Image, ScrollView, Button, TouchableOpacity, Dimensions
    } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Toolbar from '../components/ToolBar/Toolbar';

export default class HomeScreen extends Component {
    static navigationOptions ={
        title: 'Home Screen'
    };


    onValueChange(value, idx){
        this.setState({
            language: value
        })

        AsyncStorage.setItem('language', value)   
    }

    render(){
        var {navigate} = this.props.navigation;
        return(
            <View style={styles.scrollContainer}>
            <Toolbar navigate={navigate}/>
                <View>
                    <Text>Welcome To the SEcond Page</Text>
                        <Button
                            onPress={
                                ()=>navigate("Login")
                            }
                            title="Go to Login"
                        />
                </View>

我试图通过以下方式将导航道具从HomeScreen传递到工具栏

I've attempted to pass navigation props from HomeScreen to Toolbar via

当我按下按钮时，它说找不到变量导航".但是，当我取消注释工具栏上的导航时，出现错误TypeError:undefined不是一个对象(正在清除'this.props.navigation.navigate')

When I press the button, it says can't find variable 'navigate'. However, when I uncomment out navigate on Toolbar, I get the error TypeError: undefined is not an object(evaulating 'this.props.navigation.navigate')

推荐答案

在这里，您正在将道具navigate传递给Toolbar: <Toolbar navigate={navigate}/>

Here you're passing a prop navigate to Toolbar: <Toolbar navigate={navigate}/>

因此，您需要在render()中引用它: const { navigate } = this.props;

Therefore you need to refer it as such in render(): const { navigate } = this.props;

所以只有一个小错误，但这就是解决它的原因.

So only a minor mistake, but that's what fixes it.

我个人鼓励将navigation传递给Toolbar:<Toolbar navigation={ this.props.navigation } />.这样，您就可以更清楚地看到导航对象.

I'd personally encourage to pass navigation to Toolbar: <Toolbar navigation={ this.props.navigation } />. Thus you get more visibility to the navigation object.

这篇关于如何将导航道具从父组件传递到标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！