如何在React Native中在TopTabNavigationBar上方呈现视图？

Question

我目前正在开发一个应用，需要像Cabify或Uber一样在屏幕顶部显示一个视图。

这就是我想要显示应用程序的方式

我试图在Navigator中制作一个ParallaxScrollView，但是滚动行为有很多问题。

这是我当前版本的代码：

import React, { Component } from 'react'
import { View, Text, StyleSheet, Dimensions, ScrollView, Image } from 'react-native'
import { createMaterialTopTabNavigator } from 'react-navigation'
import ParallaxScrollView from 'react-native-parallax-scroll-view';

import Alerts from './Alerts'
import Record from './Record'
import Notifications from './Notifications'
import ProtectedHouses from './ProtectedHouses'

let windowWidth = Dimensions.get('window').width
let windowHeight = Dimensions.get('window').height

let mapHeight = windowWidth*0.7
let stickyHeader = windowWidth*0.17
let imageWidth = windowWidth*0.4

class Home extends Component{
  state = {
    stickyHeader,
    imageWidth
  }
  render(){
    const HomeNavigator =
      createMaterialTopTabNavigator({
        Alertes : { screen: Alerts },
        Historial: { screen: Record },
        Notificacions: { screen: Notifications },
        'Cases Protegides': { screen: ProtectedHouses }
      },{
        tabBarOptions: {
          style:{
            backgroundColor: 'white',
            swipeEnabled: true,
            elevation: 0,
            shadowOffset: { width: 0, height: 0 },
          },
          tabStyle:{
            width: 150,
            borderTopWidth: 4,
            borderTopColor: '#4A90E2',
          },
          swipeEnabled: false,
          activeTintColor: '#4A4A4A',
          inactiveTintColor: '#4A4A4A',
          upperCaseLabel: false,
          indicatorStyle: {
            backgroundColor: 'white',
          },
          scrollEnabled: true
        }
      })
    return(
      <ParallaxScrollView
        backgroundColor="#619FF6"
        fadeOutForeground={false}
        parallaxHeaderHeight= {mapHeight}
        stickyHeaderHeight= {stickyHeader}
        renderStickyHeader={() => (
          <View style={styles.containerImage}>
              <Image style={styles.imageStyle} source={require('../images/beesafeW1500.png')}/>
          </View>
        )}
        renderForeground={() => (
          <View style={styles.containerMap}><Text>Mapa</Text></View>
        )}
        renderContentBackground={()=>(
          <View style={styles.containerHome}>
            <HomeNavigator />
          </View>
        )}
      >
      </ParallaxScrollView>
    )
  }
}

const styles = StyleSheet.create({
  containerImage: {
    flex: 1,
    backgroundColor: '#619FF6',
    justifyContent: 'center',
    paddingLeft: 20
  },
  containerMap: {
    height:mapHeight,
    backgroundColor: 'yellow',
    justifyContent: 'center',
    alignItems: 'center'
  },
  containerHome: {
    flex: 1
    // height: 3000
  },
  imageStyle:{
    width: imageWidth,
    resizeMode: 'contain',
    marginTop:80
  }
})

export default Home

我坚持使用此功能，不胜感激一些建议或更好的解决方案。

谢谢！