https://github.com/zhangyanlf/rntabbar
Rract-Native TabBar（Android/iOS按钮突出效果）
https://github.com/zhangyanlf/rntabbar
android ios react-native react-navigation
Last synced: 25 days ago
JSON representation
Rract-Native TabBar（Android/iOS按钮突出效果）
- Host: GitHub
- URL: https://github.com/zhangyanlf/rntabbar
- Owner: zhangyanlf
- Created: 2018-02-02T07:57:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-05T02:38:28.000Z (over 7 years ago)
- Last Synced: 2025-04-05T07:11:12.032Z (about 2 months ago)
- Topics: android, ios, react-native, react-navigation
- Language: JavaScript
- Homepage:
- Size: 488 KB
- Stars: 8
- Watchers: 0
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# RNTabbar
TabBar（Android/iOS按钮突出效果）
## 运行工程
#### 1.cd进入testTab根目录
#### 2.npm install
#### 3.npm start
#### 4.Xcode/Android Studio 运行项目
## 效果如图
#  
## 实现代码
``` React-Native
import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
NativeModules,
ImageBackground,
DeviceEventEmitter
} from 'react-native';
export default class Tab extends Component {
renderItem = (route, index) => {
const {
navigation,
jumpToIndex,
} = this.props;
const focused = index === navigation.state.index;
const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor;
let TabScene = {
focused:focused,
route:route,
tintColor:color
};
if(index === 2){
return (
);
}
return (
jumpToIndex(index)}
>
{this.props.renderIcon(TabScene)}
{this.props.getLabel(TabScene)}
);
};
render(){
const {navigation,jumpToIndex} = this.props;
const {routes,} = navigation.state;
const focused = 2 === navigation.state.index;
const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor;
let TabScene = {
focused:focused,
route:routes[2],
tintColor:color
};
return (
{routes && routes.map((route,index) => this.renderItem(route, index))}
{/*设置中间按钮凸出样式 使用绝对定位*/}
jumpToIndex(2)}>
{this.props.renderIcon(TabScene)}
{this.props.getLabel(TabScene)}
);
}
}
const styles = {
tab:{
width:WIDTH,
backgroundColor:'transparent',
flexDirection:'row',
justifyContent:'space-around',
alignItems:'flex-end'
},
tabItem:{
height:SCALE(80),
width:SCALE(100),
alignItems:'center',
justifyContent:'center'
},
tabText:{
marginTop:SCALE(13),
fontSize:FONT(10),
color:'#7b7b7b'
},
tabTextChoose:{
color:'#f3474b'
},
tabImage:{
width:SCALE(42),
height:SCALE(42),
},
};
```
#### 推荐react-navigation 中文翻译： [zhangyanlf]: https://www.reactnavigation.org.cn
## PS：运用 react-navigation 是问题记录
#### 1.Android 导航栏文字居中效果
#### node_modules -- react-navigation -- src -- views -- Header -- Header.js 修改368行 将 alignItems: Platform.OS === 'ios' ? 'center' : 'flex-start' 改为 'center'即可 （遇到的问题后续还会持续更新）
```
title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: 'center'//Platform.OS === 'ios' ? 'center' : 'flex-start',
}
```