前段开发 react native tab功能

import React, { Component } from 'react';
import {

  StyleSheet,
  Text,
  View,
  Image,

} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'

import { Platform } from 'react-native'

//这里 是四个底部tab 切换页面
import Home from './src/assembly/myhome'
import Newrn from './src/assembly/publicrn'
import News from "./src/assembly/news";
import About from "./src/assembly/about";
import My from "./src/assembly/my";
//判断安卓手机还是iOS手机
// let paddingTop = 10;
if (Platform.OS === 'android') {
    // alert(1)
}else{
   // paddingTop = 400;
}

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

  constructor(props){
    super(props);
    this.state = {
        selectedTab: '首页'
    }
  }

  render() {
    return (
　　　　//判断安卓 iOS 屏幕上面兼容20像素
      <View style={[styles.android,Platform.OS == 'ios' ? styles.ios :Platform.OS == 'android']}>

        <TabNavigator>

          <TabNavigator.Item
              selected={this.state.selectedTab === '11'}
              title="首页"
              titleStyle={styles.tabText}
              selectedTitleStyle={styles.selectedTabText}
              renderIcon={() => <Image style={styles.icon} source={require(".png")} />}
              renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />}
              onPress={() => this.setState({ selectedTab: '11' })}>
            <View>
                <Home></Home>
            </View>
          </TabNavigator.Item>

          <TabNavigator.Item
              selected={this.state.selectedTab === '22'}
              title="22"
              titleStyle={styles.tabText}
              selectedTitleStyle={styles.selectedTabText}
              renderIcon={() => <Image style={styles.icon} source={require(".png")} />}
              renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />}
              onPress={() => this.setState({ selectedTab: '11' })}>
            <View>
                <News></News>
            </View>
          </TabNavigator.Item>

          <TabNavigator.Item
              selected={this.state.selectedTab === '33'}
              title="33"
              titleStyle={styles.tabText}
              selectedTitleStyle={styles.selectedTabText}
              renderIcon={() => <Image style={styles.icon} source={require(".png")} />}
              renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />}
              onPress={() => this.setState({ selectedTab: '33' })}>
            <View>
                <My></My>
            </View>
          </TabNavigator.Item>

          <TabNavigator.Item
              selected={this.state.selectedTab === '44'}
              title="44"
              titleStyle={styles.tabText}
              selectedTitleStyle={styles.selectedTabText}
              renderIcon={() => <Image style={styles.icon} source={require(".png")} />}
              renderSelectedIcon={() => <Image style={styles.icon} source={require(".png")} />}
              onPress={() => this.setState({ selectedTab: '44' })}>
              <View>
                  <About></About>
              </View>
          </TabNavigator.Item>

        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'#ccc',
        // paddingTop: paddingTop
    },
    android: {
        flex: 1,
        backgroundColor:'green',
    },
    ios:{
        flex: 1,
        backgroundColor:'#fff',
        marginTop:21
    },
    tabText: {
        color: "#666666",
        fontSize: 13
    },
    selectedTabText: {
        color: "#ff8a00",
        fontSize: 13
    },
    icon: {
        width: 25,
        height: 25,
    }
});