如何将导航道具从父组件传递到标题？

Posted 2023-02-19

技术标签:

【中文标题】如何将导航道具从父组件传递到标题？【英文标题】：How do I pass navigation props from parent component to header? 【发布时间】：2018-06-20 14:01:59 【问题描述】：

我有 4 个页面：App.js、HomeScreen.js、Login.js、Toolbar.js

带有 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 传递到 Toolbar，以便我可以从 Toolbar 和 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 navigate 注释掉，因为 HomeScreen 出现时不会加载。

主屏幕：

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 将导航道具传递到工具栏

当我按下按钮时，它说找不到变量“导航”。但是，当我取消注释掉工具栏上的导航时，我收到错误 TypeError: undefined is not an object(evaating 'this.props.navigation.navigate')

【问题讨论】：

【参考方案1】：

在这里，您将 navigate 传递给 Toolbar： <Toolbar navigate=navigate/>

因此您需要在render() 中这样引用它： const navigate = this.props;

所以只是一个小错误，但这就是解决它的方法。

我个人鼓励将navigation 传递给Toolbar：<Toolbar navigation= this.props.navigation />。因此，您可以更清楚地看到导航对象。

【讨论】：

render(): const 导航 = this.props; --> navigation.navigate('screen')【参考方案2】：

你可以使用 React 导航的 withNavigation 属性。如果要从组件导航。 https://reactnavigation.org/docs/en/connecting-navigation-prop.html

【讨论】：