react native curved bottom bar

réactif-natif-courbe-barre

Une barre de navigation inférieure incurvée haute performance, belle et entièrement personnalisable pour React Native. Implémenté à l'aide de React-Native-Svg et @ React Navigation / Bottom-Tabs.

 If you love this library , give us a star , you will be a ray of sunshine in our lives : )

Plate-cuisette indigène gratuite

Réagir le modèle natif avec une belle interface utilisateur.

Commencer

 npm install react - native - curved - bottom - bar -- save

ou

 yarn add react - native - curved - bottom - bar

Nous devons maintenant installer React-Native-SVG et @ React Navigation / Bottom-Tabs.

Démo

Curvedbottombar.navigator

Accessoires	Paramètres	isRequire	Description
taper	«Vers le bas» ou «up»	Oui	Type de l'onglet Centre Élément, courbe vers le bas ou courbe ascendante
position circulaire	«Centre» ou «gauche» ou «droite»	Non	Position du bouton cercle
InitialRoutename	Chaîne	Oui	Le nom de l'itinéraire vers le rendu sur le premier chargement du navigateur
tabbar	({Routename, SelectedTab, naviguez}) => jsx.element	Oui	Fonction qui renvoie un élément de réact à afficher comme barre d'onglet
circol de rendu	({Routename, SelectedTab, naviguez}) => jsx.element	Oui	Fonction qui renvoie un élément de réact à afficher comme élément de l'onglet central
largeur de cercle	Nombre	Non	Personnalisez la largeur de l'onglet Centre. Le minimum est de 50 pix et maximum est de 60px
style	Viewstyle	Non	Style pour la vue de conteneur
shadowstyle	Viewstyle	Non	Style pour une vue d'ombre.
largeur	Nombre	Non	Personnaliser la largeur pour la vue du conteneur
hauteur	Nombre	Non	Personnaliser la hauteur pour la vue du conteneur, le minimum est de 50 pix et maximum est de 90px
BorderTopleftright	Booléen	Non	Rayon de bordure en haut à gauche et en haut à droite de la vue du conteneur
frontière	Chaîne	Non	Couleur de bordure
largeur de frontière	Nombre	Non	Largeur des frontières
bgcolor	Chaîne	Non	Couleur d'arrière-plan de la vue du conteneur

CurvedBottombar.Screen

Accessoires	Paramètres	isRequire	Description
nom	Chaîne	Oui	Nom de l'itinéraire pour sauter vers
position	«Gauche» ou «droite» ou «cercle»	Oui	Réglez la position de l'icône Tabbar à gauche ou à droite du bouton Circle. Utilisez le type "cercle" uniquement lorsque vous voulez que le bouton Circle soit un TabView
composant	(accessoires) => jsx.element	Oui	Écran paramètres pour fusionner dans la route de destination

API

Fonction	Paramètres	Description
setvisible	Booléen	Utilisé pour masquer / afficher la barre d'onglet. Ex: ref.current.setVisible (false)

Utiliser dans Expo

 import React from 'react' ;
import {
  Alert ,
  Animated ,
  StyleSheet ,
  TouchableOpacity ,
  View ,
} from 'react-native' ;
import { CurvedBottomBarExpo } from 'react-native-curved-bottom-bar' ;
import Ionicons from '@expo/vector-icons/Ionicons' ;
import { NavigationContainer } from '@react-navigation/native' ;

const Screen1 = ( ) => {
  return < View style = { styles . screen1 } /> ;
} ;

const Screen2 = ( ) => {
  return < View style = { styles . screen2 } /> ;
} ;

export default function App ( ) {
  const _renderIcon = ( routeName , selectedTab ) => {
    let icon = '' ;

    switch ( routeName ) {
      case 'title1' :
        icon = 'ios-home-outline' ;
        break ;
      case 'title2' :
        icon = 'settings-outline' ;
        break ;
    }

    return (
      < Ionicons
        name = { icon }
        size = { 25 }
        color = { routeName === selectedTab ? 'black' : 'gray' }
      />
    ) ;
  } ;
  const renderTabBar = ( { routeName , selectedTab , navigate } ) => {
    return (
      < TouchableOpacity
        onPress = { ( ) => navigate ( routeName ) }
        style = { styles . tabbarItem }
      >
        { _renderIcon ( routeName , selectedTab ) }
      </ TouchableOpacity >
    ) ;
  } ;

  return (
    < NavigationContainer >
      < CurvedBottomBarExpo . Navigator
        type = "DOWN"
        style = { styles . bottomBar }
        shadowStyle = { styles . shawdow }
        height = { 55 }
        circleWidth = { 50 }
        bgColor = "white"
        initialRouteName = "title1"
        borderTopLeftRight
        renderCircle = { ( { selectedTab , navigate } ) => (
          < Animated . View style = { styles . btnCircleUp } >
            < TouchableOpacity
              style = { styles . button }
              onPress = { ( ) => Alert . alert ( 'Click Action' ) }
            >
              < Ionicons name = { 'apps-sharp' } color = "gray" size = { 25 } />
            </ TouchableOpacity >
          </ Animated . View >
        ) }
        tabBar = { renderTabBar }
      >
        < CurvedBottomBarExpo . Screen
          name = "title1"
          position = "LEFT"
          component = { ( ) => < Screen1 /> }
        />
        < CurvedBottomBarExpo . Screen
          name = "title2"
          component = { ( ) => < Screen2 /> }
          position = "RIGHT"
        />
      </ CurvedBottomBarExpo . Navigator >
    </ NavigationContainer >
  ) ;
}

export const styles = StyleSheet . create ( {
  container : {
    flex : 1 ,
    padding : 20 ,
  } ,
  shawdow : {
    shadowColor : '#DDDDDD' ,
    shadowOffset : {
      width : 0 ,
      height : 0 ,
    } ,
    shadowOpacity : 1 ,
    shadowRadius : 5 ,
  } ,
  button : {
    flex : 1 ,
    justifyContent : 'center' ,
  } ,
  bottomBar : { } ,
  btnCircleUp : {
    width : 60 ,
    height : 60 ,
    borderRadius : 30 ,
    alignItems : 'center' ,
    justifyContent : 'center' ,
    backgroundColor : '#E8E8E8' ,
    bottom : 30 ,
    shadowColor : '#000' ,
    shadowOffset : {
      width : 0 ,
      height : 1 ,
    } ,
    shadowOpacity : 0.2 ,
    shadowRadius : 1.41 ,
    elevation : 1 ,
  } ,
  imgCircle : {
    width : 30 ,
    height : 30 ,
    tintColor : 'gray' ,
  } ,
  tabbarItem : {
    flex : 1 ,
    alignItems : 'center' ,
    justifyContent : 'center' ,
  } ,
  img : {
    width : 30 ,
    height : 30 ,
  } ,
  screen1 : {
    flex : 1 ,
    backgroundColor : '#BFEFFF' ,
  } ,
  screen2 : {
    flex : 1 ,
    backgroundColor : '#FFEBCD' ,
  } ,
} ) ;

Utilisation dans RN CLI

 import React from 'react' ;
import {
  Alert ,
  Animated ,
  StyleSheet ,
  TouchableOpacity ,
  View ,
} from 'react-native' ;
import { CurvedBottomBar } from 'react-native-curved-bottom-bar' ;
import Ionicons from 'react-native-vector-icons/Ionicons' ;
import { NavigationContainer } from '@react-navigation/native' ;

const Screen1 = ( ) => {
  return < View style = { styles . screen1 } /> ;
} ;

const Screen2 = ( ) => {
  return < View style = { styles . screen2 } /> ;
} ;

export default function App ( ) {
  const _renderIcon = ( routeName , selectedTab ) => {
    let icon = '' ;

    switch ( routeName ) {
      case 'title1' :
        icon = 'ios-home-outline' ;
        break ;
      case 'title2' :
        icon = 'settings-outline' ;
        break ;
    }

    return (
      < Ionicons
        name = { icon }
        size = { 25 }
        color = { routeName === selectedTab ? 'black' : 'gray' }
      />
    ) ;
  } ;
  const renderTabBar = ( { routeName , selectedTab , navigate } ) => {
    return (
      < TouchableOpacity
        onPress = { ( ) => navigate ( routeName ) }
        style = { styles . tabbarItem }
      >
        { _renderIcon ( routeName , selectedTab ) }
      </ TouchableOpacity >
    ) ;
  } ;

  return (
    < NavigationContainer >
      < CurvedBottomBar . Navigator
        type = "UP"
        style = { styles . bottomBar }
        shadowStyle = { styles . shawdow }
        height = { 55 }
        circleWidth = { 50 }
        bgColor = "white"
        initialRouteName = "title1"
        borderTopLeftRight
        renderCircle = { ( { selectedTab , navigate } ) => (
          < Animated . View style = { styles . btnCircleUp } >
            < TouchableOpacity
              style = { styles . button }
              onPress = { ( ) => Alert . alert ( 'Click Action' ) }
            >
              < Ionicons name = { 'apps-sharp' } color = "gray" size = { 25 } />
            </ TouchableOpacity >
          </ Animated . View >
        ) }
        tabBar = { renderTabBar }
      >
        < CurvedBottomBar . Screen
          name = "title1"
          position = "LEFT"
          component = { ( ) => < Screen1 /> }
        />
        < CurvedBottomBar . Screen
          name = "title2"
          component = { ( ) => < Screen2 /> }
          position = "RIGHT"
        />
      </ CurvedBottomBar . Navigator >
    </ NavigationContainer >
  ) ;
}

export const styles = StyleSheet . create ( {
  container : {
    flex : 1 ,
    padding : 20 ,
  } ,
  shawdow : {
    shadowColor : '#DDDDDD' ,
    shadowOffset : {
      width : 0 ,
      height : 0 ,
    } ,
    shadowOpacity : 1 ,
    shadowRadius : 5 ,
  } ,
  button : {
    flex : 1 ,
    justifyContent : 'center' ,
  } ,
  bottomBar : { } ,
  btnCircleUp : {
    width : 60 ,
    height : 60 ,
    borderRadius : 30 ,
    alignItems : 'center' ,
    justifyContent : 'center' ,
    backgroundColor : '#E8E8E8' ,
    bottom : 18 ,
    shadowColor : '#000' ,
    shadowOffset : {
      width : 0 ,
      height : 1 ,
    } ,
    shadowOpacity : 0.2 ,
    shadowRadius : 1.41 ,
    elevation : 1 ,
  } ,
  imgCircle : {
    width : 30 ,
    height : 30 ,
    tintColor : 'gray' ,
  } ,
  tabbarItem : {
    flex : 1 ,
    alignItems : 'center' ,
    justifyContent : 'center' ,
  } ,
  img : {
    width : 30 ,
    height : 30 ,
  } ,
  screen1 : {
    flex : 1 ,
    backgroundColor : '#BFEFFF' ,
  } ,
  screen2 : {
    flex : 1 ,
    backgroundColor : '#FFEBCD' ,
  } ,
} ) ;