React-native create TabNavigator reference react-native-vector-icons component icon has been unable to display

react-native create TabNavigator reference react-native-vector-icons component icon has been unable to display
code is as follows:


import {StackNavigator,TabNavigator} from "react-navigation"
import HomePage from "../pages/HomePage"
import Page1 from "../pages/Page1"
import Page2 from "../pages/Page2"
import Page3 from "../pages/Page3"
import React from "react";
import {Button} from "react-native"
import Ionicons from "react-native-vector-icons/Ionicons"

export const AppTabNavigator = TabNavigator({
    Page1:{
        screen:Page1,
        navigationOptions: {
            tabBarLabel: "Page1",
            tabBarIcon: ({ tintColor, focused }) => (
              <Ionicons
                name={focused ? "ios-home" : "ios-home-outline"}
                size={26}
                style={{ color: tintColor }}
              />
            ),
        }     
    },
    Page2:{
        screen:Page2,
        navigationOptions:{
            tabBarLabel:"Page2",
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused?"ios-people":"ios-people-outline"}
                    size={26}
                    style={{color:tintColor}}
                />
            )
        }
    },
    Page3:{
        screen:Page3,
        navigationOptions:{
            tabBarLabel:"Page3",
            tabBarIcon:({tintColor,focused}) =>(
                <Ionicons
                    name={focused?"ios-chatboxes":"ios-chatboxes-outline"}
                    size={26}
                    style={{color:tintColor}}
                />
            )
        }
    }
});

current effect:

question: 1. The icon is not displayed; why does 2.TabNavigator not show to the bottom but to the top

import {TabNavigator} from 'react-navigation' import { createBottomTabNavigator } from 'react-navigation'; import Page1 from '../pages/Page1' import Page2 from '../pages/Page2' import Page3 from '../pages/Page3' import React from 'react'; import {Button,Image} from 'react-native' import Ionicons from 'react-native-vector-icons/Ionicons' export const AppTabNavigator = TabNavigator({ Page1:{ screen:Page1, navigationOptions: { tabBarLabel: 'Page1', tabBarIcon: ({ tintColor, focused }) => ( <Ionicons name={focused ? 'ios-add' : 'ios-add-circle'} size={26} style={{ color: tintColor }} /> ), // // // tabBarIcon: ({tintColor}) => ( // <Image // source={require('../images/ic_home.png')} // style={[{height: 24, width: 24}, {tintColor: tintColor}]} // /> // ), } }, Page2:{ screen:Page2, navigationOptions:{ tabBarLabel:'Page2', tabBarIcon:({tintColor,focused}) =>( <Ionicons name={focused ? 'ios-add' : 'ios-add-circle'} size={26} style={{ color: tintColor }} /> ) // tabBarIcon: ({tintColor}) => ( // <Image // source={require('../images/ic_shop_car.png')} // style={[{height: 24, width: 24}, {tintColor: tintColor}]}/> // ), } }, Page3:{ screen:Page3, navigationOptions:{ tabBarLabel:'Page3', tabBarIcon:({tintColor,focused}) =>( <Ionicons name={focused ? 'ios-add' : 'ios-add-circle'} size={26} style={{ color: tintColor }} /> ) // tabBarIcon: ({tintColor}) => ( // <Image // source={require('../images/ic_type.png')} // style={[{height: 24, width: 24}, {tintColor: tintColor}]}/> // ), } } },{ //TabNavigator tabBarPosition: 'bottom', //Tab tabBarOptions: { //Android upperCaseLabel: false,//true // showIcon: true,// showLabel: true,//label activeTintColor: '-sharpEB3695',//labelicon inactiveTintColor: 'gray',//labelicon style: { //TabNavigator backgroundColor: 'white', height: 55, }, indicatorStyle: {//height0 height: 0, }, labelStyle: {// fontSize: 13, marginTop: -5, marginBottom: 5, }, iconStyle: {// marginBottom: 5, } }, });