React Native 自定义底部标签

Question

我想要一个专门用于导航的标签设计。 我正在尝试找到最佳解决方案，但我不确定哪种方式最适合这种标签导航。正如您在图片中看到的那样，选项卡上应该有阴影，并且活动选项卡显示正确的文本和活动颜色图标，半径但不是。

我将非常感谢任何帮助。 谢谢。

React Native Tabs Navigation Design

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;