tabbar

最近著手開發的一個兼容iOS、Android的TabBar。還在不斷開發中。

歡迎fork，歡迎star。 :p

自己搗鼓了個E文的readme，沒啥難度湊合可看。

react-native-tabs

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

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 (

selectedStyle={{}} onSelect={el => this.setState({ page: el.props.name }) }

pressOpacity={1}>

icon={require('./images/Home@2x.png')}

selectedIcon={require('./images/Home_selected@2x.png')}

title='First'

selected={this.state.selectedTab === 'first'}

onPress={() => {

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

}}>

TAB 1

{/* Second */}

icon={require('./images/Home@2x.png')}

selectedIcon={require('./images/Home_selected@2x.png')}

title='Second'

selected={this.state.selectedTab === 'second'}

onPress={() => {

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

}}>

TAB 2

icon={require('./images/Account@2x.png')}

selectedIcon={require('./images/Account_selected@2x.png')}

title='Third'

selected={this.state.selectedTab === 'third'}

onPress={() => {

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

}}>

TAB 3

icon={require('./images/Account@2x.png')}

selectedIcon={require('./images/Account_selected@2x.png')}

title='Forth'

selected={this.state.selectedTab === 'forth'}

onPress={() => {

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);

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的android 仿ios tabs,React Native兼容iOS Android的TabBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。