兼容iOS Android,React Native兼容iOS Android的TabBar

74178a5511ebf4fc7493bae26b6da19d.png

最近着手开发的一个兼容iOS、Android的TabBar。还在不断开发中!

欢迎fork,欢迎star。 :p

自己捣鼓了个E文的readme,没啥难度凑合可看。

react-native-tabs

React Native platform-independent tabs. Originally forked form https://github.com/aksonov/re...

Why I need to use it?

I'm developing an app which needs to run on both iOS and Android with bottom tabs. Obviously React Native does not provide Android one, and the forked one can not work as I need.

So I develop one based on the forked one.

How it works?

I'm trying to make this tab works just like the React Native TabBarIOS. Similar API will cost you less time to integrate it.

Example

Example makes selected icon color red and change the state of example view. To switch to other views you may use react-native-router-flux component or own navigation controller

How to use

import React from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

Image

} from "react-native";

import Tabs from './Lib/TabCore';

// import Tabs from './lib/test';

// type State = {

// page: string

// };

export default class Example extends React.Component {

state: {

selectedTab: string

};

constructor(props: any) {

super(props);

this.state = {

selectedTab: 'first'

};

}

render() {

var self = this;

return (

this.setState({ page: el.props.name }) }

pressOpacity={1}>

{

this.setState({selectedTab: 'first'});

}}>

TAB 1

{/* Second */}

{

this.setState({selectedTab: 'second'});

}}>

TAB 2

{

this.setState({selectedTab: 'third'});

}}>

TAB 3

{

this.setState({selectedTab: 'forth'});

}}>

TAB 4

{/* First */}

);

}

}

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

});

AppRegistry.registerComponent('Example', () => Example);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值