[英]how do I style my react native top tab navigation to have a background color and icons
I am a bit new to react native and I am having a bit of difficulty styling my top tab navigation我对原生反应有点陌生,我在设计顶部标签导航时遇到了一些困难
how do I style my react native top tab navigation to have a background color and icons我如何设计我的本机顶部选项卡导航以具有背景颜色和图标
See code to my top tab navigation in react native在 React Native 中查看我的顶部选项卡导航的代码
I have tried all I know, nothing seems to be working我已经尝试了所有我知道的,似乎没有任何效果
see how I want it to look看看我想要的样子
see my code below看我下面的代码
import "react-native-gesture-handler"
import React from "react"
import { DefaultTheme } from "@react-navigation/native"
import { AppearanceProvider, useColorScheme } from "react-native-appearance"
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs"
import { PersonalSetupScreen } from "./tabs/personal-setup"
import { CompanySetupScreen } from "./tabs/company-setup"
import { Images } from "../../config"
const Tab = createMaterialTopTabNavigator()
const MyDarkTheme = {
// Ovverride dark theme with your theme
dark: true,
colors: {
primary: "rgb(255, 255, 255)",
background: "rgb(33, 20, 122)",
card: "rgb(255, 255, 255)",
text: "rgb(255, 255, 255)",
border: "rgb(199, 199, 204)",
notification: "rgb(255, 69, 58)",
},
}
export default function HomeTabs() {
const scheme = useColorScheme()
return (
<Tab.Navigator >
<Tab.Screen
name="PersonalSetup"
component={PersonalSetupScreen}
options={({ navigation }) => ({
tabBarLabel: "Personal Details",
activeTintColor: "#21147a",
inactiveTintColor: "21147a",
activeBackgroundColor: "#21147a",
inactiveBackgroundColor: "#21147a",
style: {
backgroundColor: "#21147a",
},
})}
/>
<Tab.Screen
name="CompanySetup"
component={CompanySetupScreen}
options={({ navigation }) => ({
tabBarLabel: "Company Details",
activeTintColor: "#21147a",
inactiveTintColor: "21147a",
activeBackgroundColor: "#21147a",
inactiveBackgroundColor: "#21147a",
style: {
backgroundColor: "#21147a",
},
})}
/>
</Tab.Navigator>
)
}
According to the documentation here: Material Top Tab Navigator根据此处的文档: Material Top Tab Navigator
You can pass in a tabBarIcon
.您可以传入一个
tabBarIcon
。
You can also pass your own custom component as a TabBar Button that you can style however you want (Text + Icon + BackgroundColor ...)您还可以将您自己的自定义组件作为 TabBar 按钮传递,您可以根据需要设置样式(文本 + 图标 + 背景颜色 ...)
you might have already found out the solution.您可能已经找到了解决方案。
Here is the complete example from reactnavigation.org .这是来自reactnavigation.org的完整示例。
import { Animated, View, TouchableOpacity } from 'react-native';
function MyTabBar({ state, descriptors, navigation, position }) {
return (
<View style={{ flexDirection: 'row' }}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
canPreventDefault: true,
});
if (!isFocused && !event.defaultPrevented) {
// The `merge: true` option makes sure that the params inside the tab screen are preserved
navigation.navigate({ name: route.name, merge: true });
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
const inputRange = state.routes.map((_, i) => i);
const opacity = position.interpolate({
inputRange,
outputRange: inputRange.map(i => (i === index ? 1 : 0)),
});
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? { selected: true } : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={options.tabBarTestID}
onPress={onPress}
onLongPress={onLongPress}
style={{ flex: 1 }}
>
<Animated.Text style={{ opacity }}>
{label}
</Animated.Text>
</TouchableOpacity>
);
})}
</View>
);
}
// ...
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
{...}
</Tab.Navigator>
Reference: https://reactnavigation.org/docs/material-top-tab-navigator/#tabbar参考: https : //reactnavigation.org/docs/material-top-tab-navigator/#tabbar
For more information, please go through this link .如需更多信息,请访问此链接。
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';从'@react-navigation/material-top-tabs'导入{createMaterialTopTabNavigator};
const TopTab = createMaterialTopTabNavigator(); const TopTab = createMaterialTopTabNavigator();
const Tab = () => {
return (
<TopTab.Navigator
screenOptions={{
tabBarActiveTintColor:'white',
tabBarIndicatorStyle: {
backgroundColor: 'white',
height: 2
},
tabBarScrollEnabled: true,
tabBarLabelStyle: {fontSize: 20},
tabBarItemStyle: { width: 150, },
tabBarStyle: {
height: 40,
backgroundColor: '#c21a0c',
},
}}
>
<TopTab.Screen name ='PERSONAL DETAILS' component={Personal} Options={{
tabBarIcon: () => (
<MaterialCommunityIcons name="search-web" size={24} />
)}} />
<TopTab.Screen name ='COMPANY DETAILS' component = {Company} />
<TopTab.Screen name ='CONTACT DETAILS' component = {FOX} />
<TopTab.Screen name ='PROFILE' component = {Google} />
</TopTab.Navigator>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.