/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View,TabBarIOS,} from 'react-native'; export default class App extends Component { constructor(props){ super(props); this.state={ selectedTabBarItem:'home' } } render(){ return( <View style={styles.container}> <View style={{alignItems: 'center'}}><Text>页面导航</Text></View> {/*底部选项*/} <TabBarIOS> {/*第一个*/} <TabBarIOS.Item systemIcon="bookmarks" badge="3" selected={this.state.selectedTabBarItem== 'home'} onPress={()=>{this.setState({selectedTabBarItem:'home'})}} > <View style={{flex: 1, justifyContent: "center", backgroundColor: "yellow",alignItems:'center'}}> <Text> 首页</Text> </View> </TabBarIOS.Item> {/*第2个*/} <TabBarIOS.Item systemIcon="contacts" selected={this.state.selectedTabBarItem== 'downloads'} onPress={()=>{this.setState({selectedTabBarItem:'downloads'})}} > <View style={{flex: 1, justifyContent: "center", backgroundColor: "red",alignItems:'center'}}> <Text> 第二页</Text> </View> </TabBarIOS.Item> {/*第3个*/} <TabBarIOS.Item systemIcon="favorites" selected={this.state.selectedTabBarItem== 'search'} onPress={()=>{this.setState({selectedTabBarItem:'search'})}} > <View style={{flex: 1, justifyContent: "center", backgroundColor: "blue",alignItems:'center'}}> <Text> 第3页</Text> </View> </TabBarIOS.Item> {/*第4个*/} <TabBarIOS.Item systemIcon="history" selected={this.state.selectedTabBarItem== 'bookmarks'} onPress={()=>{this.setState({selectedTabBarItem:'bookmarks'})}} > <View style={{flex: 1, justifyContent: "center", backgroundColor: "green",alignItems:'center'}}> <Text> 第4页</Text> </View> </TabBarIOS.Item> </TabBarIOS> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, });
TabBarIOS,TabBarIOS.Item
猜你喜欢
转载自blog.csdn.net/weixin_42286434/article/details/81114138
今日推荐
周排行