Так что я действительно новичок в работе с нативными и мобильными разработчиками, я хотел изменить цвет фона навигации в нижней панели вкладок, и я не могу понять, как это сделать, так как я начал с реактивного нативного проекта с навигацией (опция в фазе инициализации экспо), то, как пишется материал, отличается от того, что я видел на net, я знаю, что мне нужно добавить
tabBarOptions: {
style: { backgroundColor: 'orange'}
}
, но, если честно, ИДК, где именно , если кто-то может помочь, это будет высоко ценится! вот мой код:
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const config = Platform.select({
web: { headerMode: 'screen' },
default: {},
});
const HomeStack = createStackNavigator(
{
Home: HomeScreen,
},{
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: {
backgroundColor: 'pink'
}
}
},
config
);
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused, tintColor }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
color= {"#cd077dr"}
/>
), style: {
backgroundColor: 'pink'
}
};
HomeStack.path = '';
const LinksStack = createStackNavigator(
{
Links: LinksScreen,
},{
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: {
backgroundColor: 'pink'
}
}
},
config
);
LinksStack.navigationOptions = {
tabBarLabel: 'Links',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} />
)
};
LinksStack.path = '';
const SettingsStack = createStackNavigator(
{
Settings: SettingsScreen,
},{
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: {
backgroundColor: 'pink'
},
tabBarOptions: {
style: { backgroundColor: 'orange'}
}
}
},
config
);
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings',
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} />
),
};
SettingsStack.path = '';
const tabNavigator = createBottomTabNavigator({
HomeStack,
LinksStack,
SettingsStack,
});
tabNavigator.path = '';
export default tabNavigator;