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

Question

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

这是我的应用程序.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子对象无效(已找到：带键的对象｛label，to，onPress，onLongPress，testID，accessibilityLabel，可访问性角色，可访问性状态，可访问状态，样式，儿童}(。如果要渲染子对象的集合，请使用数组。在div中(由Text创建(文本中(由Context.Consumer创建(在StyledNativeComponent中(由Styled(Text(创建(在样式化(文本(中(位于表js:21(在div中(由View创建(视图中(由Context.Consumer创建(在StyledNativeComponent中(由Styled(View(创建(在样式化(视图(中(位于表js:19(在ForwardRef(TouchableWithoutFeedback(中在ForwardRef(TouchableWithoutFeedback(中(由Context.Consumer创建(在StyledNativeComponent中(由Styled(TouchableWithoutFeedback(创建(in Styled(TouchableWithoutFeedback((见表js:18(在选项卡中(位于App.js:20(在BottomTabBarItem(由BottomTabBar创建(中

我认为app.js代码中的这一部分有错误，但我不知道它是什么以及如何解决。

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

谢谢

Answer 1

您在选项卡组件上检索道具不正确

下面的代码可以帮助您了解如何传递道具。你可以销毁你的道具并将其传递到jsx中，也可以直接获得道具并使用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;

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

替代方案是

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;