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

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.{&nbsp; &nbsp; &nbsp; &nbsp; const active = accessibilityState.selected;&nbsp; &nbsp; &nbsp; &nbsp; const icon = !active ? Images.icons[label] : Images.icons[ `${label}Active` ];&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Container>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Background>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Icon source={icon}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label>{label}</Label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Background>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Container>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; export default Tab;Props 是一个单一对象，您可以在其中传递所有属性。另一种选择是，function Tab(props ) //<== props.{&nbsp; &nbsp; &nbsp; &nbsp; const active = props.accessibilityState.selected;&nbsp; &nbsp; &nbsp; &nbsp; const icon = !active ? Images.icons[label] : Images.icons[ `${props.label}Active` ];&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Container>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Background>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Icon source={icon}/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label>{props.label}</Label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Background>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Container>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp; export default Tab;