Пользовательские вкладки Стилизация в React Navigation

Question

Я занимаюсь разработкой приложения с использованием React-Native (Expo) с модулем React-Navigation.Я изо всех сил пытаюсь получить то, что хочу для стиля «createBottomTabBar», и работаю над настраиваемым компонентом панели вкладок.

Где я могу узнать / найти примеры, подобные этому?Является ли мой код правильным?

Я использую это: Нижняя граница нижней навигации в React Native и это видео: https://www.youtube.com/watch?v=w24FE9PZpzk

Но я не знаю, какчтобы продолжить.

Router / index.js

import { createSwitchNavigator,createStackNavigator, createBottomTabNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';

import { Home, SignUpScreen, LoginScreen, ForgotPasswordScreen,  Setting, AboutScreen, ScanFlight, FlightDetails, ChatList, ChatMessages, FriendList, exploreProfile, myProfile, FlightAdd, Notifications,Achievements } from '../Screens';

// Tab bar Custom Component
import appBottomTabs from '../NavigationLayout/bottomTabBar'

// Bottom Tab navigation

const MainTabNavigator = createBottomTabNavigator({
    Home,
    ChatList,
    ScanFlight
}, {
tabBarOptions: {
      activeTintColor: "#6200EE",      
    inactiveTintColor: "#858585",  
    style: {               
     paddingVertical: 10,        
     backgroundColor: "#fff",
     border: '#ffffff'  
    },      
    labelStyle: {        
     fontSize: 14,        
     lineHeight: 16,        
     fontFamily: "Rubik_Regular"      
    },
    tabBarPosition: "bottom",
    tabBarComponent: appBottomTabs,
    animationEnabled: true,
    swipeEnabled: true,
    unmountInactiveRoutes: true
  }
});

// Drawer Navigation

const appDrawerNavigator = createDrawerNavigator({
Home: {screen: MainTabNavigator},

Login: LoginScreen,
SignUp: SignUpScreen,
ForgotPassword: ForgotPasswordScreen,

Settings: Setting,
About: AboutScreen,

FlightDetails: FlightDetails,
FlightAdd: FlightAdd,

}, {
    unmountInactiveRoutes: true
});

const AppLoginNavigator = createSwitchNavigator({
LoginScreen,
ForgotPasswordScreen,
appDrawerNavigator: {
    screen: appDrawerNavigator
},
appStackNavigator: {
    screen: appStackNavigator
}
});


const AppContainer =  createAppContainer(AppLoginNavigator);

class App extends Component {
render() {
    return (
        <AppContainer />
    );
}
 }


export default App;

NavigationLayout / bottomTabBar.js

import React, {Component} from 'react'
import {View, TouchableWithoutFeedback, Text, StyleSheet} from 'react-native'

class appBottomTabs extends Component {

  constructor(){
super()
this.state = {
  routeNameSelected:'Home'
}
  }

  onPressTab(routeName){
this.props.jumpTo(routeName)
this.setState({
  routeNameSelected:routeName
})
   }

  render() {
const {navigation} = this.props;
const {routes} = navigation.state;
return (
    <View style={styles.tabbar}>
      {routes && routes.map((route, index) => {
        return (
          <TouchableWithoutFeedback
            key={route.key}
            style={styles.tab}
            onPress={() => this.onPressTab(route.routeName)}
          >
          </TouchableWithoutFeedback>
        );
      })}

    </View>
)
  }
}

export default appBottomTabs;

Это макет, который я стремлюсь достичь:https://postimg.cc/Mfc5HxPs

с активной ссылкой, имеющей больший размер шрифта и нижнюю границу.

Answer 1

Так что вам нужно использовать defaultNavigationOptions в createBottomTabNavigator.defaultNavigationOptions принимает компонент функции / реагирования, где вы можете вернуть свой компонент.Например

const renderNav = (routeName, name, tintColor, focused) => (
  <View style={{flex: 1, alignItems: 'center', borderBottomColor: focused ? tintColor: '', borderBottomWidth: focused ? 4 : 0}}>
    <Icon name={name} color={tintColor} size={12} style={{paddingBottom: 4, paddingTop: 10}} />
    <Text  style={{paddingBottom: 8}}>{routeName}</Text>
  </View>
)

const customTabs = ({ navigation }) => ({
  tabBarIcon: ({ focused, horizontal, tintColor }) => {
    const { routeName } = navigation.state;
    if (routeName === 'Profile') {
      return renderNav(routeName, 'user', tintColor, focused);
    } else if (routeName === 'Home') {
      return renderNav(routeName, 'home', tintColor, focused);
    } else if (routeName === 'History') {
      return renderNav(routeName, 'history', tintColor, focused);
    } else if (routeName === 'Cart') {
      return renderNav(routeName, 'shopping-cart', tintColor, focused);
    }
  }
});
const DashboardTabNav = createBottomTabNavigator({
  Profile: {
    screen: ProfileScreen
  },
  Home: Dashboard,
  History: SettingsScreen,
  Cart: CartScreen
},
{
  defaultNavigationOptions: customTabs,
  animationEnabled: true,
  swipeEnabled: true,
  tabBarPosition: 'bottom',
  initialRouteName: 'Cart',
  tabBarOptions: {
    activeTintColor: '#6C1D7C',
    inactiveTintColor: 'rgba(0,0,0,0.6)',
    showLabel: false,
    style:{
      shadowColor: 'rgba(58,55,55,0.1)',
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 1,
      shadowRadius: 15,
      elevation: 3,
      borderTopColor: 'transparent',
      backgroundColor:'#fff',
      borderTopLeftRadius: 20,
      borderTopRightRadius: 20,
      height: 50
    },
    activeTabStyle: {
      backgroundColor: 'white',
      borderBottomWidth: 4,
      borderColor: '#6C1D7C'
    }
  },
});