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

Question

我正在尝试自定义 react 原生导航，在使用 props 选项时遇到了一些问题

这是我的 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 子对象无效（找到：带键的对象 {标签，到，onPress，onLongPress，testID，accessibilityLabel， 可访问性角色，可访问性状态，可访问性状态，样式， 孩子们}）。如果您打算渲染一组孩子，请使用 代替数组。 在 div 中（由文本创建） 在文本中（由 Context.Consumer 创建） 在 StyledNativeComponent 中（由 Styled(Text) 创建） 在样式（文本）中（在 Tab.js:21） 在 div 中（由 View 创建） 在视图中（由 Context.Consumer 创建） 在 StyledNativeComponent 中（由 Styled(View) 创建） 在样式（视图）中（在 Tab.js:19） 在 ForwardRef(TouchableWithoutFeedback) 在 ForwardRef(TouchableWithoutFeedback) 中（由 Context.Consumer 创建） 在 StyledNativeComponent（由 Styled(TouchableWithoutFeedback) 创建） 在 Styled(TouchableWithoutFeedback) (在 Tab.js:18) 在选项卡中（在 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 是一个单一对象，您可以在其中传递所有属性。

替代方案是，

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;