当我尝试在导航中使用道具时出现错误

Question

我正在尝试自定义反应本机导航，在使用道具选项时遇到一些问题这是我的 app.js 代码    import { NavigationContainer } from '@react-navigation/native';import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'import { StatusBar } from 'expo-status-bar';import React from 'react';import { StyleSheet, Text, View } from 'react-native';import Home from './Screens/home';import Orders from './Screens/orders';import Account from './Screens/account';import TabComponent from './components/Tab'const Tab = createBottomTabNavigator()export default function App() {  return (         <NavigationContainer>        <Tab.Navigator>          <Tab.Screen  name="Home" component={Home} options={{            tabBarButton: (props) => <TabComponent label="home" {...props} />,          }} />          <Tab.Screen  name="My Orders" component={Orders} />          <Tab.Screen  name="Account" component={Account} />        </Tab.Navigator>      </NavigationContainer>     );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',     },});这是我的 tabs.js 代码import React from 'react';import { TouchableWithoutFeedback } from 'react-native-gesture-handler';import styled from 'styled-components/native';import Images from '../images';const  Container = styled.TouchableWithoutFeedback``;const Background = styled.View``;const Icon = styled.Image``;const Label = styled.Text``;function Tab(label, accessibilityState ){    const active = accessibilityState.selected;    const icon = !active ? Images.icons[label] : Images.icons[ `${label}Active` ];    return(        <Container>            <Background>                <Icon source={icon}/>                <Label>{label}</Label>            </Background>        </Container>    );}export default Tab;

Answer 1

您在选项卡组件上错误地检索道具，

下面的代码可以帮助您了解如何传递 props。您可以解构您的 props 并将其传递到 jsx 内部，或者直接获取 props 并使用 props.label（等）

function Tab({label, accessibilityState} ) //<== Destructed props.

{

        const active = accessibilityState.selected;

        const icon = !active ? Images.icons[label] : Images.icons[ `${label}Active` ];

        return(

            <Container>

                <Background>

                    <Icon source={icon}/>

                    <Label>{label}</Label>

                </Background>

            </Container>

        );

    }

    

    export default Tab;

Props 是一个单一对象，您可以在其中传递所有属性。

另一种选择是，

function Tab(props ) //<== props.

{

        const active = props.accessibilityState.selected;

        const icon = !active ? Images.icons[label] : Images.icons[ `${props.label}Active` ];

        return(

            <Container>

                <Background>

                    <Icon source={icon}/>

                    <Label>{props.label}</Label>

                </Background>

            </Container>

        );

    }

    export default Tab;