как сделать вкладки на React-Native в средней позиции экрана

Question

как мне сделать вкладки на React-Native в средней позиции экрана. если я использую вкладки, это означает, что я могу поместить его на экран только вверх или вниз, пока я хочу быть в середине экрана. Я пытался использовать навигацию, но она не появилась. Может кто-нибудь мне помочь? спасибо

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, ScrollView, 
ImageBackground, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import IndividuScreen from './src/individu';
import UnitScreen from './src/unit';

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',
});


export default class App extends Component {
render() {
const Appss = createAppContainer(Apps);
return (
  <ScrollView>
    <View>
      <View style={{ width: '100%', height: 60, backgroundColor: '#ed1c24', flexDirection: 'row' }}>
        <Icon name="chevron-left" size={15} color={'white'} style={{ marginTop: 25, marginLeft: '3%' }} />
        <Image
          style={styles.logo}
          source={require('./assets/img/icon.png')}
        />
        <Icon name="check-square" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '30%' }} />
        <Icon name="bell" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
        <Icon name="ellipsis-v" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
      </View>
      <ImageBackground
        source={require('./assets/img/gedung.png')}
        style={{ width: '100%', height: 300, marginBottom: 0, marginTop: 0 }}>
        <View style={{ marginTop: 230 }}>
          <ScrollView horizontal={true}>
            <Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Beranda</Text>
            <Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Training Saya</Text>
            <Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Katalog</Text>
            <Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Jadwal</Text>
            <Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
            <Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
          </ScrollView>
        </View>
      </ImageBackground>

        <Appss />
      {/* Appss Not Show*/}

      <View style={{ textAlign: 'left', padding: 15, flexDirection: 'row', marginTop: 20 }}>
        <Image source={require('./assets/img/medal.png')} style={{ width: 30, height: 35, marginRight: "5%", }} />
        <View style={{ flexDirection: 'column' }}>
          <Text style={{ fontSize: 20, paddingBottom: 10, fontWeight: 'bold' }}>Point CPD Anda: <Text style={{ color: 'red', fontSize: 30, }}>2</Text></Text>
          <Text style={{ fontSize: 14, color: 'red' }}>LIHAT RINCIAN POINT CPD > </Text>
        </View>
      </View>
      <View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
      <View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
        <Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Training Saya</Text>
      </View>
      <View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
        <View style={{ marginLeft: "5%", marginRight: "15%", textAlignVertical: 'center' }}>
          <Text style={{ height: 60, width: 60, borderWidth: 1.5, borderRadius: 50, fontSize: 30, textAlignVertical: 'center', textAlign: 'center', color: 'maroon', fontWeight: 'bold' }}>07</Text>
        </View>
        <View style={{ flexDirection: 'column' }}>
          <Text style={{ fontSize: 14 }}>KALENDER</Text>
          <Text style={{ fontSize: 25, color: 'maroon', fontWeight: 'bold' }}>Selasa</Text>
          <Text style={{ fontSize: 14 }}>SEPTEMBER 2018</Text>
        </View>
      </View>
      <View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
      <View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUprime healthcare</Text>
      </View>
      <View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
        <View style={{ flexDirection: 'column' }}>
          <Text style={{ fontSize: 14 }}>09:00 - 12:00</Text>
          <Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
          <Text style={{ fontSize: 14 }}>Jakarta</Text>
        </View>
        <Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
      </View>
      <View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
      <View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
        <Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUfast Start</Text>
      </View>
      <View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
        <View style={{ flexDirection: 'column' }}>
          <Text style={{ fontSize: 14 }}>14:00 - 17:30</Text>
          <Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
          <Text style={{ fontSize: 14 }}>Jakarta</Text>
        </View>
        <Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
      </View>
      <View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
      <View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
        <Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
        <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Status Belajar</Text>
      </View>
      <View style={{ textAlign: 'left', paddingLeft: 15 }}>
        <Text>TECHNICAL SKILLS</Text>
        <View style={{ flexDirection: 'row', marginTop: 10 }}>
          <Text style={{ fontWeight: 'bold' }}>Syariah Basic Training</Text>
          <Text style={{ marginLeft: 15, backgroundColor: 'orange', paddingLeft: 4, paddingRight: 4, color: 'white', fontStyle: 'italic' }}>e-learning</Text>
        </View>
      </View>
      <View style={{ marginTop: 20, flexDirection: 'row' }}>
        <Image source={require('./assets/img/progress4.png')} style={{ width: '100%', height: 60, }} />
        <Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: 10 }} />
      </View>
    </View >
  </ScrollView>
);
}
}

const Apps = createStackNavigator({
  Individu: {
screen: IndividuScreen,
navigationOptions: {
  header: null
}
}, Unit: {
screen: UnitScreen,
navigationOptions: {
  header: null
}
}
});


const styles = StyleSheet.create({
logo: {
width: '35%',
height: 40,
marginTop: 10,
marginLeft: '3%',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

для IndividualidScreen и UnitScreen, которые будут отображаться в приложении, но не отображаются. если я верну только приложения для физических лиц и единиц, чтобы появиться. но если я введу его в TAG индивидуальный скрин и UnitScreen не появится. возможно у вас есть способ показать два экрана в одном компоненте. спасибо