react native curved bottom bar

ก้นก้น

แถบการนำทางด้านล่างโค้งที่สวยงามและปรับแต่งได้สูงสำหรับการตอบสนอง ดำเนินการโดยใช้ React-Native-SVG และ @react-navigation/-tabs

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

เตาผิงหม้อไอรี

ตอบสนองเทมเพลตพื้นเมืองกับ UI ที่สวยงาม

เริ่มต้น

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

หรือ

 yarn add react - native - curved - bottom - bar

ตอนนี้เราต้องติดตั้ง React-Native-SVG และ @react-navigation/-tabs

การสาธิต

curvedbottombar.navigator

อุปกรณ์ประกอบฉาก	พารามิเตอร์	ISRequire	คำอธิบาย
พิมพ์	'ลง' หรือ 'ขึ้น'	ใช่	ประเภทของรายการแท็บกลางเส้นโค้งลงหรือเส้นโค้งขึ้นไป
วงกลม	'ศูนย์' หรือ 'ซ้าย' หรือ 'ขวา'	เลขที่	ตำแหน่งของปุ่มวงกลม
ชื่อเริ่มต้น	สาย	ใช่	ชื่อของเส้นทางที่จะแสดงผลในการโหลดครั้งแรกของ Navigator
แท็บบาร์	({routename, selectedTab, NaviGate}) => jsx.element	ใช่	ฟังก์ชั่นที่ส่งคืนองค์ประกอบปฏิกิริยาเพื่อแสดงเป็นแถบแท็บ
Rendercircle	({routename, selectedTab, NaviGate}) => jsx.element	ใช่	ฟังก์ชั่นที่ส่งคืนองค์ประกอบปฏิกิริยาเพื่อแสดงเป็นรายการแท็บกลาง
วงกลม	ตัวเลข	เลขที่	ปรับแต่งความกว้างของรายการแท็บกลาง ขั้นต่ำคือ 50px และสูงสุดคือ 60px
สไตล์	ViewStyle	เลขที่	สไตล์สำหรับมุมมองคอนเทนเนอร์
Shadowstyle	ViewStyle	เลขที่	จัดแต่งทรงผมสำหรับมุมมองเงา
ความกว้าง	ตัวเลข	เลขที่	ปรับแต่งความกว้างสำหรับมุมมองคอนเทนเนอร์
ความสูง	ตัวเลข	เลขที่	ปรับแต่งความสูงสำหรับมุมมองคอนเทนเนอร์ขั้นต่ำคือ 50px และสูงสุดคือ 90px
Bordertopleftright	บูลีน	เลขที่	รัศมีเส้นขอบด้านบนซ้ายและขวาบนของมุมมองคอนเทนเนอร์
ชายแดน	สาย	เลขที่	สีพรมแดน
ความกว้าง	ตัวเลข	เลขที่	ความกว้างชายแดน
สี bgcolor	สาย	เลขที่	สีพื้นหลังของมุมมองคอนเทนเนอร์

curvedbottombar.screen

อุปกรณ์ประกอบฉาก	พารามิเตอร์	ISRequire	คำอธิบาย
ชื่อ	สาย	ใช่	ชื่อเส้นทางที่จะข้ามไป
ตำแหน่ง	'ซ้าย' หรือ 'ขวา' หรือ 'วงกลม'	ใช่	ตั้งค่าตำแหน่งของไอคอน Tabbar ทางซ้ายหรือขวาของปุ่มวงกลม ใช้ประเภท "วงกลม" เฉพาะเมื่อคุณต้องการปุ่มวงกลมคือ tabview
ส่วนประกอบ	(อุปกรณ์ประกอบฉาก) => jsx.element	ใช่	หน้าจอพารามิเตอร์เพื่อรวมเข้ากับเส้นทางปลายทาง

API

การทำงาน	พารามิเตอร์	คำอธิบาย
สามารถมองเห็นได้	บูลีน	ใช้เพื่อซ่อน/แสดงแถบแท็บ ตัวอย่าง: Ref.Current.setVisible (FALSE)

ใช้ในงานแสดงสินค้า

 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' ,
  } ,
} ) ;

ใช้ใน 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' ,
  } ,
} ) ;