import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView, TabBarIOS } from 'react-native'; export default class TabBar extends Component { constructor(props){ super(props); this.state = { selectedTabBarItem: 'home' }; } render(){ return( <View style={styles.container}> <Text>aaa</Text> <TabBarIOS barTintColor='orange' // tintColor = 'purple' title="张三" > {/* 1 */} <TabBarIOS.Item badge="3" systemIcon="bookmarks" selected={this.state.selectedTabBarItem == 'home'} onPress = {()=>{this.setState({selectedTabBarItem: 'home'})}} > {/*界面中的内容*/} <View style={[styles.itemStyle, {backgroundColor:'gray'}]}> <Text>首页</Text> </View> </TabBarIOS.Item> {/* 2 */} <TabBarIOS.Item systemIcon="downloads" selected={this.state.selectedTabBarItem == 'second'} onPress = {()=>{this.setState({selectedTabBarItem: 'second'})}} > {/*界面中的内容*/} <View style={[styles.itemStyle, {backgroundColor:'orange'}]}> <Text>第二页</Text> </View> </TabBarIOS.Item> </TabBarIOS> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, backgroundColor: 'white', marginTop: 20 }, itemStyle:{ flex:1, justifyContent:'center', alignItems:'center' } }); module.exports = TabBar;
TabBarIOS
最新推荐文章于 2022-12-12 11:54:56 发布