360SDN.COM

React-native之开源Tab导航组件(17)

来源:  2017-06-18 16:46:48    评论:0点击:

作者 飞奔的小马
来源:http://www.jianshu.com/p/6531602d9b17
一. 简介

大多数应用都会有导航进行页面切换,React Native原生的控件仅有TabBarIOS可供iOS平台使用,如果想同时适配Android和IOS,最好使用第三方控件,比如:react-native-tab-navigator
地址:https://github.com/exponent/react-native-tab-navigator

二. 使用

(1)安装
在项目根目录下 使用命令行安装 npm install react-native-tab-navigator --save
(2)导入
import TabNavigator from 'react-native-tab-navigator';
(3)使用示例
class HomeUI extends Component { constructor(props) { super(props);//这一句不能省略,照抄即可 this.state={ selectedTab:'home'//默认选中home } } render(){ var homeView=( <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}> <Text style={{fontSize: 30}}>首页</Text> </View> ); var settingView=( <View style={[styles.flex,styles.center,{backgroundColor: '#ffff0044'}]}> <Text style={{fontSize: 30}}>设置</Text> </View> ); return ( <TabNavigator tabBarStyle={{ height: 60 }} > <TabNavigator.Item selected={this.state.selectedTab === 'home'} title="首页" //Tab文字 renderIcon={() => <Image style={styles.img} source={require('./home_tab_home_normal.png') }/>}//默认图标 renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_home_pressed.png') }/>}//选中图标 badgeText="9+"//消息数目 onPress={() => this.setState({ selectedTab: 'home' })} > {homeView} </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === 'setting'} title="设置" renderIcon={() => <Image style={styles.img} source={require('./home_tab_setting_normal.png') }/>} renderSelectedIcon={() => <Image style={styles.img} source={require('./home_tab_setting_pressed.png') }/>} onPress={() => this.setState({ selectedTab: 'setting' })} > {settingView} </TabNavigator.Item> </TabNavigator> ); } } const styles = StyleSheet.create({ flex:{ flex:1, }, center:{ justifyContent:'center', alignItems:'center' }, img: { width: 40, height: 33, }, });
效果


tab_navigator_01.png
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权