/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
ScrollView,
ListView,
TouchableOpacity,
AlertIOS,
TabBarIOS
} from 'react-native';
var helloworld = React.createClass({
getInitialState(){
return{
selectedTabItem:'第一页'
}
},
render() {
return (
<View style={styles.container}>
<TabBarIOS style={styles.tabbar}
>
<TabBarIOS.Item
systemIcon='bookmarks'
badge='5'
onPress={()=>this.setState({
selectedTabItem:'第一页'
})
}
selected={this.state.selectedTabItem === '第一页'}
>
<View style={styles.vcview}>
<Text style={{backgroundColor:'red'}}>很帅'第一页'</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon='contacts'
onPress={()=>this.setState({
selectedTabItem:'第二页'
})
}
selected={this.state.selectedTabItem === '第二页'}
>
<View style={styles.vcview}>
<Text style={{backgroundColor:'red'}}>'第二页'</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon='downloads'
onPress={()=>this.setState({
selectedTabItem:'第三页'
})}
selected={this.state.selectedTabItem === '第三页'}
>
<View style={styles.vcview}>
<Text style={{backgroundColor:'red'}}>'第三页'</Text>
</View>
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon='featured'
onPress={()=>this.setState({
selectedTabItem:'第四页'
})}
selected={this.state.selectedTabItem === '第四页'}
>
<View style={styles.vcview}>
<Text style={{backgroundColor:'red'}}>'第四页'</Text>
</View>
</TabBarIOS.Item>
</TabBarIOS>
</View>
)
}
}
);
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:"red"
},
tabbar:{
backgroundColor:'green'
},
tabbaritem:{
},
vcview:{
flex:1,
backgroundColor:'purple',
alignItems:'center',
justifyContent:'center'
}
});
AppRegistry.registerComponent('helloworld', () => helloworld);
注意：
- TabBarIOS.Item可以直接添加onPress事件
- selected如果不赋值，那么不会展示出对应的vc view
- tabbar父组件的justifyContent和alignItems一定不要给!!!
