Question

我正在尝试使用其底页行为来复制google maps功能。我正在通过react-native-interactable进行此操作。请务必注意，我正在使用功能组件！我正在使用react-navigation，并试图允许底层更改自身以及主地图视图上的视图，反之亦然。我尝试使用两种不同的堆栈导航器，一种用于主地图视图，一种用于底部工作表。 我将它们嵌套为组件的子代。由于这些是功能组件，因此docs中所述的static router = BottomSheetNavigator.router不适用于功能组件。我如何才能实现这里的目标？

这是我目前拥有的：

MainNavigator.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import { MapScreen } from '../mapScreen';

const MainNavigator = createStackNavigator(
  {
    Map: MapScreen,
    Detail: DetailScreen
  },
  {
    initialRouteName: 'Map',
    headerMode: 'none'
  }
);

export default createAppContainer(MainNavigator);

MapScreen.js

const MapScreen = props => {
  //do some other stuff here
  return (
    <View style={{ ...StyleSheet.absoluteFillObject }}>
      <MapView
        ref={mapRef}
        provider={PROVIDER_GOOGLE}
        showsUserLocation
        followUserLocation
        style={{ ...StyleSheet.absoluteFillObject }}
        onLayout={() => setReady(true)}
        onPress={() => dispatch({ type: REMOVEROUTE })}
        initialRegion={initialRegion}
      >
        {markers}
      </MapView>
      <MemoedUserLocationButton animateToRegion={animateToRegion} />
      <BannerAd />
      <BottomSheet navigation={props.navigation} />
    </View>
  );
};

BottomSheet.js

import React from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import Interactable from 'react-native-interactable';
import BottomSheetNavigator from './BottomSheetNavigator';

const { height } = Dimensions.get('window');

const BottomSheet = props => {
  //I've been told to put 'static router = BottomSheetNavigator.route' here
  //But because it's not a class component, static doesn't work
  return (
    <View style={styles.panelContainer} pointerEvents={'box-none'}>
      <Interactable.View
        verticalOnly
        snapPoints={[{ y: height - (height * 0.35) }, { y: height - (height * 0.50) }]}
        boundaries={{ top: -400 }}
        initialPosition={{ y: 10 }}
      >
        <View style={styles.panel}>
          <View style={styles.panelHeader}>
            <View style={styles.panelHandle} />
          </View>
          <View style={styles.carousel}>
            <BottomSheetNavigator navigation={props.navigation} />
          </View>
        </View>
      </Interactable.View>
    </View>

  );
};

BottomSheetNavigator.js

import { createStackNavigator } from 'react-navigation-stack';
import FavoritesList from './FavoritesList';

const BottomNavigator = createStackNavigator(
  {
    Favorites: FavoritesList,
  },
  {
    initialRouteName: 'Favorites',
    headerMode: 'none'
  }
);

export default BottomNavigator;

将嵌套的堆栈导航器与功能组件一起使用

0 个答案: