react-native - 使用自定义 bottomTab 组件时,React Navigation V5 不接收焦点参数
问题描述
我目前正在尝试在使用 React Navigation 5 作为导航库的 react native 应用程序中实现自定义 tabBar 设计。一切正常,除了我的 tabBarIcons 没有收到任何道具,所以我无法确定是否必须显示活动或非活动 tabIcon。每当我使用默认标签栏时,我都会收到道具,所以我的自定义标签栏一定有问题。不过,我确实遵循了文档,并且只找到了发出“tabPress”事件的指令。但是,我确实认为我应该发出更多事件来获得正确的聚焦道具。我已经像这样设置了导航器:
const Tabs = createBottomTabNavigator();
export default () => (
<Tabs.Navigator tabBar={TabBarComponent} initialRouteName="Home">
<Tabs.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ focused }) => {
// The props here are {}, so focused is undefined.
const icon = focused
? require('images/iconOverviewRed.png')
: require('images/iconOverviewGrey.png');
return <Image source={icon} />;
},
}}
/>
<Tabs.Screen
name="Overview"
component={OverviewScreen}
options={{
tabBarIcon: props => {
console.log(props);
return <Image source={require('images/logoRed.png')} />;
},
}}
/>
<Tabs.Screen
name="Account"
component={AccountScreen}
options={{
tabBarIcon: ({ focused }) => {
const icon = focused
? require('images/iconAccountRed.png')
: require('images/iconAccountGrey.png');
return <Image source={icon} resizeMethod="resize" />;
},
}}
/>
</Tabs.Navigator>
);
这是我的自定义 tabBar 组件:
const TabBar = ({ navigation, state, descriptors }: any) => {
return (
<View style={styles.container}>
{state.routes.map((route: any) => {
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!event.defaultPrevented) {
navigation.dispatch({
...TabActions.jumpTo(route.name),
target: state.key,
});
}
};
return (
<TabIcon
key={route.key}
Icon={descriptors[route.key].options.tabBarIcon}
onPress={onPress}
isBig={route.name === 'Home'}
/>
);
})}
</View>
);
};
const TabIcon = ({ onPress, Icon, key, isBig }: any) => {
return (
<TouchableWithoutFeedback key={key} onPress={onPress}>
<View style={isBig ? styles.bigTab : styles.defaultTab} key={key}>
<Icon />
</View>
</TouchableWithoutFeedback>
);
};
提前致谢。
解决方案
descriptors[route.key].options
只是为您提供您指定的选项。如果您记录 的值descriptors[route.key].options.tabBarIcon
,您会看到它打印了您指定的函数。
在您的自定义标签栏中,您可以根据需要使用该选项。由于它在这里是一个函数,因此您必须调用它并传递所需的参数。
descriptors[route.key].options.tabBarIcon({ focused: state.index === index })
这也意味着您可以完全控制该选项。您可以放置您想要的任何类型、函数、直接要求语句等,然后使用它。您也不必调用它tabBarIcon
,您可以随意调用它。
推荐阅读
- wordpress - ACF - 图库字段 -> 反向查找以查找该图像在图库字段中的所有帖子
- python - 如何只关闭一个特定打开的 docx 文件?
- javascript - Javascript:从对象中提取键值对并将它们组合在一个对象数组中
- c# - WCF 非域系统
- reactjs - 在 NextJS 中丢失 threejs 上下文
- javascript - 在 Socket.io 回调中解析一个 Promise 会返回一个对不会被垃圾回收的变量的引用
- aspose - Aspose.Word 将 DOCX 转换为 HTML 会丢失 MERGEFIELD、IF 条件、页眉和页脚、表格单元格宽度
- java - Selenium with Java:从某些设备上运行时,使用 AShot 的屏幕截图会被剪切
- intellij-idea - 如何在 Intellij 中用搜索/替换替换部分行?
- mysql - MySql Cli中<和Source的性能比较