ReactNative→TabBar

相关属性

/**
 * 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一定不要给!!!