content: /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TabBarIOS
  } from 'react-native';
  import Icon from 'react-native-vector-icons/Ionicons';
  
  import List from './app/creation/list';
  
  
  export default class ReactNative_demoApp extends Component {
    
    constructor(props) {
      super(props);
      this.state = {
        selectedTab: 'listTab'
      }
    }
    
    /*
     * 返回选中的标签内容
     * @param {string} color 返回内容的背景颜色
     * @param {string} pageText 返回内容的文本内容
     * retrun {object} 返回一个react对象
     */ 
    _renderContent(color:string, pageText:string) {
      return (
        <View style={[styles.container,{backgroundColor:color}]}>
          <Text style={ styles.text }>{pageText}</Text>
        </View>
      );
    }
  
    render() {
      return (
        <TabBarIOS
          tintColor='dodgerblue'
          translucent={true}>
          <Icon.TabBarItemIOS
            iconName='ios-videocam-outline'
            selectedIconName='ios-videocam'
            selected={ this.state.selectedTab === 'listTab' }
  
            onPress={() => this.setState({
              selectedTab: 'listTab'
            })}>
            
            <List />
          </Icon.TabBarItemIOS>  
          <Icon.TabBarItemIOS
            iconName='ios-recording-outline'
            selectedIconName='ios-recording'
            selected={ this.state.selectedTab === 'recordingTab' }
  
            onPress={() => this.setState({
              selectedTab: 'recordingTab'
            })}>
  
            { this._renderContent('#783E33', this.state.selectedTab) }
          </Icon.TabBarItemIOS>
          <Icon.TabBarItemIOS
            iconName='ios-more-outline'
            selectedIconName='ios-more'
            selected={ this.state.selectedTab === 'moreTab' }
  
            onPress={() => this.setState({
              selectedTab: 'moreTab'
            })}>
  
            { this._renderContent('#21551C', this.state.selectedTab) }
          </Icon.TabBarItemIOS>
        </TabBarIOS>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },
  
    text: {
      margin: 50,
      color: 'white',
      fontSize: 18
    }
  });
  
  AppRegistry.registerComponent('ReactNative_demoApp', () => ReactNative_demoApp);
  