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 (
                  

                    
                        this.setState({
                                selectedTabItem:'第一页'
                            })
                            }
                            selected={this.state.selectedTabItem === '第一页'}
                        >
                                 
                                很帅'第一页'
                                
                        

                        this.setState({
                                selectedTabItem:'第二页'
                            })
                            }
                            selected={this.state.selectedTabItem === '第二页'}
                        >
                            
                                '第二页'
                            
                        

                        this.setState({
                                selectedTabItem:'第三页'
                            })}
                            selected={this.state.selectedTabItem === '第三页'}

                        >
                            
                                '第三页'
                            
                        

                        this.setState({
                                selectedTabItem:'第四页'
                            })}
                            selected={this.state.selectedTabItem === '第四页'}
                        >
                            
                                '第四页'
                            
                        
                    

                  
              )
                  }
             }
        );

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