1.0.5 • Published 6 years ago

react-native-tabbar-animated v1.0.5

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

react-native-tabbar-animated

the animated of tabbar

前言

该组件主要是做一个小动画,目前用在tabbar上面,当然其他地方也可以用,可能其他地方适配不太好.

github 仓库地址

react-native-tabbar-animated

gif 项目中的效果

效果

install 安装

npm install react-native-tabbar-animated --save

use 使用

1.导入 import {CustomAnimation} from 'react-native-tabbar-animated'

2.使用在react-navigation 的 TabNavigator <CustomAnimation animationStyle={'linear'} imageAddress={require('../img/nav-bar-mall-selected.png')} />

demo:

Main: {
    screen: Mall,
    navigationOptions: ({screenProps}) =>({
        title: '商城',
        tabBarLabel:({ focused }) =>( focused?'置顶':'商城'),
        tabBarIcon: ({ tintColor,focused }) =>
            ( focused? <CustomAnimation animationStyle={'linear'} imageAddress={require('../img/nav-bar-mall-selected.png')} />
            :
            <Image source={!focused ? require('../img/nav-bar-mall.png') : require('../img/nav-bar-mall-selected.png') }
            style={ styles.icon }
            />
            )

    }),
},

api 方法

PropDescriptionDefault
url线上图片链接{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}
imageAddress本地图片{require('../img/nav-bar-me.png')}
animationStyle跳动,伸缩spring
animationStyle旋转spin
animationStyle上下移动linear
junpTime跳动持续时间4000
spinTime旋转持续时间4000
linearTime移动持续时间4000
imageStyle图片的样式None
style背景view样式None

方法都是可选,根据需要加入