Реагировать на собственные пользовательские нижние вкладки

Question

Я хочу, чтобы дизайн вкладок был специально для навигации. Я пытаюсь найти лучшее решение, но я не уверен, какой путь лучше всего подходит для такого рода навигации по вкладкам. Как видно на рисунке, на вкладках должна быть тень, а на активной вкладке отображается правильный текст и значок активного цвета, радиус, но это не так.

Я был бы очень признателен за любую помощь. Спасибо.

Реагировать на собственные вкладки Дизайн навигации

Answer 1

Я реализовал этот дизайн с помощью пользовательского компонента панели вкладок. Это вкладка и компонент вкладки.

function renderTabIcons(title, focused) {
  switch(title) {
    case 'Message':
      return <MessageIcon width={20} height={20} fill={focused ? Colors.whiteTone : Colors.greyTone} />
    case 'Search':
      return <SearchIcon width={20} height={20} fill={focused ? Colors.whiteTone : Colors.greyTone} />
    case 'Coincide':
      return <CoincideIcon width={20} height={20} fill={focused ? Colors.whiteTone : Colors.greyTone} />
    case 'Notification':
      return <NotificationIcon width={20} height={20} fill={focused ? Colors.whiteTone : Colors.greyTone} />
    case 'Profile':
      return <ProfileIcon width={20} height={20} fill={focused ? Colors.whiteTone : Colors.greyTone} />
    default:
      return null;
  }
}
const Tab = ({ focusAnim, title, onPress, focused }) => {

  const animatedViewStyle = {
    padding: 10,
    height:40,
    borderRadius: 20,
    backgroundColor: focusAnim.interpolate({
      inputRange: [0, 1],
      outputRange: ["transparent", Colors.background]
    }),
    marginTop: -15,
  
    flexDirection: 'row',
    alignItems:'center',
    justifyContent: 'center',   
    width: focused ? 0.3 * FULL_SW : 0.175 * FULL_SW
  }
  const animatedTextStyle = {
    color: focusAnim.interpolate({
      inputRange: [0, 1],
      outputRange: ["#444", "#fff"]
    }),
    paddingLeft: 10,
  }
  return (
    <TouchableOpacity onPress={onPress}>
      <Animated.View
        style={animatedViewStyle}
      >      
       {renderTabIcons(title, focused)}
       {focused ? <Animated.Text
          style={animatedTextStyle}
        >{title}</Animated.Text> : null}
        
      </Animated.View>
    </TouchableOpacity>
  )
}
const TabBar = (props) => {
  const { navigation } = props
  const { state } = navigation
  const position = new Animated.Value(state.index)
  return (
    <View style={{
      height: 80,
      backgroundColor: '#fff',
      flexDirection: "row",
  
      // justifyContent: 'space-around',
      alignItems: 'center',

      shadowColor: "#000",
        shadowOffset:{
        width: 0,
        height: 0,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        borderTopWidth: 0,  



    }}>
    {state.routes.map((route, index) => {
      const focusAnim = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [0, 1, 0]
      })
      return (
        <Tab 
          focusAnim={focusAnim}
          title={route.routeName} 
          onPress={() => navigation.navigate(route.routeName)}
          focused={state.index === index}
        />
      )
    })}
    </View>
  )
}

export default TabBar;