Question

我有一个父功能组件Layout，它需要道具才能访问它的子组件。但是，当我使用导航5.x时，我还需要通过导航，但是我尝试过的尚未奏效。这是我的工作

import { Container, Header, Content, Left, Right } from 'native-base';
import React from 'react';
import { View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { useNavigation } from '@react-navigation/native';

const Layout = (props, navigation) => {

        return (
            <Container >
                <Header style={{ alignItems: 'center', backgroundColor: '#3a455c', height: 50 }}>
                    <Left style={{ flexDirection: 'row' }}>
                        <MaterialIcon style={{ color: 'white', marginRight: 10 }} onPress={ () => console.log(navigation) } size={30} color="black" name= 'menu' />
                    </Left>
                    <Icon onPress={ () => navigation.navigate('Index') } size={20} style={{marginTop: 4, marginLeft: 130}} color="white" name= 'home' />
                    <Right style={{ flexDirection: 'row' }}>
                        <Icon onPress={ () => navigation.navigate('Index') } size={20} style={{marginTop: 4}} color="green" name= 'user' />
                    </Right>
                </Header>
                <Content >
                    <View>
                        { props.children }
                    </View>
                </Content>
            </Container>
        );
}

export default Layout;

布局组件正在新闻稿组件中呈现

function Newsletter() {

        const navigation = useNavigation();
        return (
            <Layout >
                <ScrollView style={{ marginTop: 40, marginLeft: 12 }}>
                    <Text style={{fontSize: 24, fontFamily: 'sans-serif-medium', textAlign: 'center', fontWeight: 'bold'}} > Directed Distraction </Text>
                    <View>
                        <Text style={{ marginTop: 12, fontSize: 18, textAlign: 'left', fontStyle: 'italic' }}>
                        Elon Reeve Musk FRS (/ˈiːlɒn/; born June 28, 1971) is an engineer,
                         industrial designer, technology entrepreneur and philanthropist.
                          He is a citizen of South Africa, Canada, and the United States.
                          He is based in the United States, where he immigrated to at age 20 and 
                         has resided since. He is the founder, CEO and chief engineer/designer 
                         of SpaceX; early investor, CEO and product architect of Tesla, 
                         Inc.; founder of The Boring 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 longest tenured CEO of any automotive manufacturer globally.
                        </Text>
                        <Button title="a" onPress={ () => console.log(navigation) }></Button>
                    </View>
                </ScrollView>
            </Layout>
    );
}

导航与对象一样被打印{}。帮助将不胜感激。

Answer 1

我将首先解释一下：navigation对象在此组件呈现为任何导航器的屏幕而不是其旁边的屏幕时传递给prop对象。所以你现在可以做几件事

1- const Layout = (props)，您可以像访问navigation一样访问children

2-或者您可以像这样从props.navigation.navigate('Index')对象中解构想要的任何东西：props这样您就可以键入更少的内容，因为您不再需要引用props对象，它将成为const Layout = ({children, navigation}) => {

3-如果您的组件不是由navigation.navigate('Index')呈现的，则navigator将不会传递给navigation object，并且它将是不确定的-在这种情况下，您可以执行的简单解决方案，但这不是唯一的解决方案：

我看到您已经导入prop object和useNavigation为您提供了开箱即用的useNavigation，因此您可以在组件内部执行以下操作：navigation object然后您可以像往常一样使用const navigation = useNavigation()，但不要忘记从组件参数中删除navigation 在这里您可以找到有关navigation useNavigation

的更多详细信息

4-在这里，我将添加我认为应该可以使用的布局组件代码

useNavigation hook

还有其他选项，例如将处理程序传递给onPress并从有权访问导航对象的组件中执行此功能

我希望这对您有用。让我知道它是否有效

在响应导航中传递道具和导航

1 个答案: