![](/img/trans.png)
[英]How to change the background color of selected bottom tab in react native navigation
[英]how do I style my react native top tab navigation to have a background color and icons
我對原生反應有點陌生,我在設計頂部標簽導航時遇到了一些困難
我如何設計我的本機頂部選項卡導航以具有背景顏色和圖標
在 React Native 中查看我的頂部選項卡導航的代碼
我已經嘗試了所有我知道的,似乎沒有任何效果
看我下面的代碼
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>
)
}
根據此處的文檔: Material Top Tab Navigator
您可以傳入一個tabBarIcon
。
您還可以將您自己的自定義組件作為 TabBar 按鈕傳遞,您可以根據需要設置樣式(文本 + 圖標 + 背景顏色 ...)
您可能已經找到了解決方案。
這是來自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>
參考: https : //reactnavigation.org/docs/material-top-tab-navigator/#tabbar
如需更多信息,請訪問此鏈接。
從'@react-navigation/material-top-tabs'導入{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.