Circle open screen

[hoaphantn7604]

Circle open screen

[hoaphantn7604]

Bạn có thực sự cần tính năng này cho dự án không, nếu nó thật sự quan trọng mình sẽ custom cho bạn

[hoaphantn7604]

Mình đã custom yêu cầu của bạn trong version 1.5.0.

Bạn thêm code này vào giữa các tab "left" và "right".

 <CurvedBottomBar.Screen
      name="title1"
      component={({ navigate }) => <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />}
      position="left"
 />
 <CurvedBottomBar.Screen
      name="center"
      component={({ navigate }) => <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />}
      position="center"
 />
 <CurvedBottomBar.Screen
      name="title2"
      component={({ navigate }) => <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />}
      position="right"
 />

[hoaphantn7604]

Bạn xem code mẫu này.

[hoaphantn7604]

"AppScreen" bạn dùng nó giống như một màn hình bình thường nằm bên trong stack navigation.

[hoaphantn7604]

Nếu thấy package này hữu ích thì star nhé.

[hoaphantn7604]

Nếu còn issue gì bạn cứ tạo ticket.

[hoaphantn7604]

Nó là cái button không phải 1 tab nha bạn.

[minhhoangzeno]

vâng, bạn có thể gợi ý cho mình biết thư viện nào khác mà custom bottom tab bar như của bạn và hình tròn ở giữa là tab không ạ. Giá như thư viện này của bạn, nút tròn là tab thì hay biết mấy. :D

[minhhoangzeno]

Tính năng này thật sự rất hữu ích, thiết kế của bạn rất phù hợp. Nhưng mình thêm code như bạn thì vẫn chưa nhận được đúng ý của mình. Phiền bạn xem giúp mình nhé.

[minhhoangzeno]

Mình vẫn thấy hình tròn ở giữa khi ấn vào mà vẫn alert button , chưa chuyển sang màn khác bạn ạ.

[hoaphantn7604]

<CurvedBottomBar.Navigator
  ref={ref}
  type={type}
  height={60}
  circleWidth={55}
  bgColor="white"
  borderTopLeftRight={true}
  strokeWidth={2}
  swipeEnabled={true}
  initialRouteName="title1"
  renderCircle={({ selectTab, navigate }) => (
    <TouchableOpacity
      style={styles.btnCircle} onPress={navigate('center')}>
      <Ionicons name="sync-outline" size={26} />
    </TouchableOpacity>
  )}
  tabBar={({ routeName, selectTab, navigate }) => {
    return (
      <TouchableOpacity
        onPress={() => navigate(routeName)}
        style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        {_renderIcon(routeName, selectTab)}
      </TouchableOpacity>
    );
  }}>
  <CurvedBottomBar.Screen
    name="title1"
    position="left"
    component={({ navigate }) => <View style={{ backgroundColor: '#BFEFFF', flex: 1 }} />}
  />
  <CurvedBottomBar.Screen
    name="center"
    component={({ navigate }) => <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />}
    position="center"
  />
  <CurvedBottomBar.Screen
    name="title2"
    component={({ navigate }) => <View style={{ backgroundColor: '#FFEBCD', flex: 1 }} />}
    position="left"
  />
</CurvedBottomBar.Navigator>

[minhhoangzeno]

Mình thử được rồi bạn ạ, thực sự cảm ơn bạn. Mình xin hỏi thêm một vấn đề nữa, mình có xem ở issuses trước đó mà mình thay vào của mình thì lại chưa được. Mình để 2 Stack.Navigator ở dưới CurvedBottomBar thì gặp lỗi.

[minhhoangzeno]

Hiện lỗi thế này bạn ạ. Mong bạn xem giúp mình!

[hoaphantn7604]

https://github.com/hoaphantn7604/react-native-template-components
bạn có thể xem code mẫu ở đây.

[minhhoangzeno]

Rất hữu ích bạn ạ, chắc chắn sẽ có nhiều người dùng thư viện này của bạn đó. Cảm ơn bạn đã lắng nghe và update version. :D