Как визуализировать вид выше TopTabNavigationBar в React Native? - PullRequest
Новая
       27

Как визуализировать вид выше TopTabNavigationBar в React Native?

0 голосов
/ 31 октября 2018

В настоящее время я разрабатываю приложение, в котором мне нужно отобразить вид сверху экрана, как это делают Cabify или Uber.

Вот как я хочу отобразить приложение Sketch of desired result

Я пытался создать 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

Я застрял с этой функцией, и я был бы признателен за некоторые предложения или лучшее решение.

Заранее спасибо!

...