當我嘗試在導航中使用道具時出現錯誤

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;

這是我面臨的錯誤。

錯誤：對象作為 React 子項無效（發現：object 鍵為 {label,to,onPress,onLongPress,testID,accessibilityLabel,accessibilityRole,accessibilityState,accessibilityStates,style,children}）。 如果您打算渲染一組子項，請改用數組。 在 div 中（由 Text 創建） 在 Text 中（由 Context.Consumer 創建） 在 StyledNativeComponent 中（由 Styled(Text) 創建） 在 Styled(Text) 中（在 Tab.js:21 中） 在 div 中（由 View 創建）在 View 中（創建by Context.Consumer) 在 StyledNativeComponent 中（由 Styled(View) 創建） 在 Styled(View) 中（在 Tab.js:19） 在 ForwardRef(TouchableWithoutFeedback) 在 ForwardRef(TouchableWithoutFeedback) 中（由 Context.Consumer 創建）在 StyledNativeComponent 中（由Styled(TouchableWithoutFeedback)) 中 Styled(TouchableWithoutFeedback) （Tab.js:18） Tab 中（App.js:20）中 BottomTabBarItem（由 BottomTabBar 創建）

我認為 app.js 代碼的這一部分有錯誤，但我不知道它是什么以及如何解決它。

options={{
            tabBarButton: (props) => <TabComponent label="home" {...props} />,
          }}

謝謝

Answer 1

您在選項卡組件上錯誤地檢索道具，

下面是幫助您了解如何傳遞道具的代碼。 您可以解構您的道具並將其傳遞到 jsx 中，也可以直接獲取道具並使用 props.label(etc.)

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 是單個 object ，您可以在其中傳遞所有屬性。

替代方案是，

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;