reactjs - 如何使用 react-navigation 在 React Native 中创建自定义顶部标签栏?
问题描述
我是 React Native 的新手,所以我不知道如何创建自定义顶部标签栏任何人帮助我或参考这个?
如果我点击日然后日组件渲染,TabBar 输出应该是这样的,如果我点击周然后周组件是这样渲染的。提前致谢
解决方案
您可以找到许多教程来创建自定义标签栏。使用 createMaterialTopTabNavigator 创建顶栏。
import { createMaterialTopTabNavigator, createAppContainer } from "react-navigation"
import TabBar from './TabBar'
const TabNavigator = createMaterialTopTabNavigator({
feed: {
screen: () => null,
},
profile: {
screen: () => null,
},
inbox: {
screen: () => null,
}
}, {
tabBarComponent: TabBar,
})
export default createAppContainer(TabNavigator)
TabBar 组件
import * as React from "react"
import { View } from "react-native"
import Tab from './Tab'
const TabBar = (props) => {
const { navigationState, navigation, position } = props
return (
<View style={{
height: 80,
backgroundColor: 'seashell',
flexDirection: "row",
justifyContent: 'space-around',
alignItems: 'center',
}}>
{navigationState.routes.map((route, index) => {
const focusAnim = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [0, 1, 0]
})
return (
<Tab
focusAnim={focusAnim}
title={route.routeName}
onPress={() => navigation.navigate(route.routeName)}
/>
)
})}
</View>
)
}
export default TabBar
选项卡组件
import * as React from "react"
import { Animated, TouchableOpacity } from "react-native"
const Tab = ({ focusAnim, title, onPress }) => {
return (
<TouchableOpacity onPress={onPress}>
<Animated.View
style={{
padding: 10,
borderRadius: 10,
backgroundColor: focusAnim.interpolate({
inputRange: [0, 1],
outputRange: ["transparent", "tomato"]
})
}}
>
<Animated.Text
style={{
color: focusAnim.interpolate({
inputRange: [0, 1],
outputRange: ["#444", "#fff"]
})
}}
>{title}</Animated.Text>
</Animated.View>
</TouchableOpacity>
)
}
export default Tab
您需要做的是根据您的需要对其进行样式设置。
推荐阅读
- java - SprinBoot JpaRepository findByEmail 不工作
- javascript - 如何将包含嵌入对象的字符串转换为对象类型?
- c++ - std::bind 与成员函数和 c++ 中的 this
- javascript - JQUERY 自动完成不显示从 php 脚本返回的结果
- python - AWS MSK,在配置中 auto.create.topics.enable=true 但不起作用
- vb.net - 接口新手尝试使用VB.NET接口和类创建Plugin系统
- java - Java - 不考虑实例给定值的方法
- c++ - 编译器说关于重新定义错误,但是只在头文件和 C++ 文件中提到的函数
- arduino - 两个超声波传感器可以共享触发电缆吗
- python - 为什么我的聊天过滤器会阻止单词列表顶部的单词?(discord.py)