Передача реквизитов и навигации в react navigation

ProgramBox

Передача реквизитов и навигации в react navigation

Post author:admin
Запись опубликована:4 июня, 2023
Post category:Вопросы по программированию

#react-native #react-navi&ation-v5

Вопрос:

У меня есть макет родительского функционального компонента, которому нужны реквизиты, чтобы иметь доступ к его дочерним элементам. Однако, поскольку я использую navi&ation 5.x, мне также нужно передать навигацию, но то, что я пробовал, пока не сработало. Вот моя работа

 import { Container, Header, Content, Left, Ri&ht } from 'native-base';
import React from 'react';
import { View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useNavi&ation } from '@react-navi&ation/native';

const Layout = (props, navi&ation) =&&t; {

        return (
            <Container &&t;
                <Header style={{ ali&nItems: 'center', back&roundColor: '#3a455c', hei&ht: 50 }}&&t;
                    <Left style={{ flexDirection: 'row' }}&&t;
                        <MaterialIcon style={{ color: 'white', mar&inRi&ht: 10 }} onPress={ () =&&t; console.lo&(navi&ation) } size={30} color="black" name= 'menu' /&&t;
                    </Left&&t;
                    <Icon onPress={ () =&&t; navi&ation.navi&ate('Index') } size={20} style={{mar&inTop: 4, mar&inLeft: 130}} color="white" name= 'home' /&&t;
                    <Ri&ht style={{ flexDirection: 'row' }}&&t;
                        <Icon onPress={ () =&&t; navi&ation.navi&ate('Index') } size={20} style={{mar&inTop: 4}} color="&reen" name= 'user' /&&t;
                    </Ri&ht&&t;
                </Header&&t;
                <Content &&t;
                    <View&&t;
                        { props.children }
                    </View&&t;
                </Content&&t;
            </Container&&t;
        );
}

export default Layout;

Компонент макета отображается в компоненте информационного бюллетеня

 function Newsletter() {

        const navi&ation = useNavi&ation();
        return (
            <Layout &&t;
                <ScrollView style={{ mar&inTop: 40, mar&inLeft: 12 }}&&t;
                    <Text style={{fontSize: 24, fontFamily: 'sans-serif-medium', textAli&n: 'center', fontWei&ht: 'bold'}} &&t; Directed Distraction </Text&&t;
                    <View&&t;
                        <Text style={{ mar&inTop: 12, fontSize: 18, textAli&n: 'left', fontStyle: 'italic' }}&&t;
                        Elon Reeve Musk FRS (/ˈiːlɒn/; born June 28, 1971) is an en&ineer,
                         industrial desi&ner, technolo&y entrepreneur and philanthropist.
                          He is a citizen of South Africa, Canada, and the United States.
                          He is based in the United States, where he immi&rated to at a&e 20 and 
                         has resided since. He is the founder, CEO and chief en&ineer/desi&ner 
                         of SpaceX; early investor, CEO and product architect of Tesla, 
                         Inc.; founder of The Borin& Company; co-founder of Neuralink; and 
                         co-founder and initial co-chairman of OpenAI. He was elected a Fellow of 
                         the Royal Society (FRS) in 2018. In December 2016, he was ranked 21st 
                         on the Forbes list of The World's Most Powerful People, and was ranked 
                         joint-first on the Forbes list of the Most Innovative Leaders of 2019. 
                         A self-made billionaire, as of July 2020 his net worth was estimated at $44.9
                          billion and he is listed by Forbes as the 22nd-richest person in the world.
                           He is the lon&est tenured CEO of any automotive manufacturer &lobally.
                        </Text&&t;
                        <Button title="a" onPress={ () =&&t; console.lo&(navi&ation) }&&t;</Button&&t;
                    </View&&t;
                </ScrollView&&t;
            </Layout&&t;
    );
}

навигация печатается просто как объект{}. Была бы признательна за помощь.

Ответ №1:

Сначала я кое-что объясню: navi&ation объект передается объекту prop, когда этот компонент отображается в виде экрана для любого навигатора, а не рядом с ним, так что теперь вы можете сделать пару вещей

1- const Layout = (props) и вы можете получить доступ к navi&ation примерно так, как вы получаете доступ к children вот так props.navi&ation.navi&ate('Index')

2- или вы можете просто удалить все, что хотите, из props объекта следующим образом: const Layout = ({children, navi&ation}) =&&t; { таким образом, вы можете вводить меньше, поскольку вам больше не нужно ссылаться на объект props, и это будет navi&ation.navi&ate('Index')

3- если ваш компонент не отображается с помощью a navi&ator , то navi&ation object не будет передан prop object и он будет неопределенным — в этом случае есть простое решение, которое вы можете сделать, и это не единственное решение:

Я вижу, что вы уже импортируете useNavi&ation и useNavi&ation предоставляете navi&ation object «из коробки» для вас, поэтому то, что вы можете сделать внутри вашего компонента, это: const navi&ation = useNavi&ation() затем вы можете использовать navi&ation как всегда, но не забудьте удалить navi&ation из параметров компонента здесь вы можете найти более подробную информацию о useNavi&ation hook useNavi&ation

4- здесь я добавлю код для компонента layout, который, по моему мнению, должен работать

 import { Container, Header, Content, Left, Ri&ht } from 'native-base';
import React from 'react';
import { View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useNavi&ation } from '@react-navi&ation/native';

const Layout = (props) =&&t; {
const navi&ation = useNavi&ation();
        return (
            <Container &&t;
                <Header style={{ ali&nItems: 'center', back&roundColor: '#3a455c', hei&ht: 50 }}&&t;
                    <Left style={{ flexDirection: 'row' }}&&t;
                        <MaterialIcon style={{ color: 'white', mar&inRi&ht: 10 }} onPress={ () =&&t; console.lo&(navi&ation) } size={30} color="black" name= 'menu' /&&t;
                    </Left&&t;
                    <Icon onPress={ () =&&t; navi&ation.navi&ate('Index') } size={20} style={{mar&inTop: 4, mar&inLeft: 130}} color="white" name= 'home' /&&t;
                    <Ri&ht style={{ flexDirection: 'row' }}&&t;
                        <Icon onPress={ () =&&t; navi&ation.navi&ate('Index') } size={20} style={{mar&inTop: 4}} color="&reen" name= 'user' /&&t;
                    </Ri&ht&&t;
                </Header&&t;
                <Content &&t;
                    <View&&t;
                        { props.children }
                    </View&&t;
                </Content&&t;
            </Container&&t;
        );
}

export default Layout;

существуют и другие варианты, такие как передача обработчика в onPress и выполнение этой функции из компонента, у которого есть доступ к объекту навигации

Я надеюсь, что это полезно для вас. дайте мне знать, если это сработает

1. спасибо за помощь, но моя проблема в том, что, хотя я передал навигацию так, как вы предложили, навигация печатается как неопределенная, а не как object {}

2. тогда вы не отображаете макет внутри навигатора, если макет не отображается внутри навигатора, тогда у вас будет несколько вариантов, и один из них — полностью удалить навигацию из параметров, и я вижу, что вы импортируете { useNavi&ation } из ‘@react-navi&ation / native’; и useNavi&ation hook возвращает объект навигации, поэтому внутри вашего компонента вы выполните: const navi&ation = useNavi&ation(); а затем используйте эту навигацию внутри onPress navi&ation.navi&ate(‘Index’) скажите мне, если это не справка — все о том, где вы рендерите макет и есть ли в нем доступ к навигации

3. я отредактирую ответ, чтобы получить другое решение, братан

4. Это говорит couldn't find a navi&ation object. Is your component inside a screen in a navi&ator , когда я пытаюсь использовать useNavi&ation()

5. мне нужно знать, где вы рендерите этот компонент макета