React Native 带有持久操作表的渲染底部选项卡

jgzswidk 于 6个月前发布在 React

关注(0)|答案(1)|浏览(63)

我正在尝试在我的应用程序中实现以下布局：
x1c 0d1x的数据
基本上，我的<BottomTabNavigator/>的内容在底部工作表中呈现，而Map总是在后面呈现为屏幕。当你在底部工作表中切换时，底部工作表保持不变，但内容会发生变化。
我正在使用react-navigation和@gorhom/bottom-sheet
我能够实现这一点，但希望一些指导如何正确地设置这一使用React导航。
我还没有找到一个官方的指南或任何东西，所以我在网上查了一下，有些人提到创建一个自定义标签栏，在顶部呈现一个BottomSheet（这就是我如何能够实现这种布局）。

const CustomTabBar = props => {
  return (
    <React.Fragment>
       <BottomSheet
         snapPoints = {[450, 300, 0]}
         renderContent = {this.renderInner}
         renderHeader = {this.renderHeader}
       />
      <BottomTabBar {...props} />
    </React.Fragment>
  );
};

字符串
然后我会在模态中做条件渲染来显示不同的屏幕。这确实感觉有点笨拙，输入导航和状态 prop 是一场噩梦。
有更好的办法吗？
我试过把我的<BottomTab /> Package 在<BottomSheet />里面，但似乎不起作用。
自定义标签栏是正确的方法吗？
任何帮助真的很感激！

react-native

来源：https://stackoverflow.com/questions/77444622/render-bottom-tab-with-persistent-action-sheet

1条答案

按热度按时间

bpzcxfmw1#

由于这里的自定义标签栏有底部工作表，它对所有标签屏幕都是一样的，如果我们在自定义底部标签组件中管理底部工作表状态，也会产生性能问题。
尝试使用下面的示例来实现与上图所示相同的功能。

import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
  useRef,
} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

import {SafeAreaProvider} from 'react-native-safe-area-context';

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const BottomTab = createBottomTabNavigator();

const CustomBottomSheet = forwardRef((myProps, ref) => {
  // ref
  const bottomSheetRef = useRef<BottomSheet>(null);

  // variables
  const snapPoints = useMemo(() => ['25%'], []);

  useImperativeHandle(
    ref,
    () => {
      return {
        open: () => {
          bottomSheetRef.current?.expand();
        },
        close: () => {
          bottomSheetRef.current?.close();
        },
      };
    },
    [],
  );

  return (
    <BottomSheet ref={bottomSheetRef} snapPoints={snapPoints}>
      <View style={styles.centeredContent}>
        <Text style={styles.textStyle}>{`inside ${myProps.name}`}</Text>
      </View>
    </BottomSheet>
  );
});

const TabComponent = (props: any) => {
  const customBottomSheetRef = useRef<any>(null);

  useEffect(() => {
    customBottomSheetRef.current?.open();
  }, []);

  return (
    <View style={styles.centeredContent}>
      <Text style={styles.textStyle}>{props.route.name}</Text>
      <CustomBottomSheet ref={customBottomSheetRef} name={props.route.name} />
    </View>
  );
};

function App(): JSX.Element {
  return (
    <GestureHandlerRootView style={styles.safeAreaContainer}>
      <SafeAreaProvider style={styles.safeAreaContainer}>
        <NavigationContainer>
          <BottomTab.Navigator>
            <BottomTab.Screen name="home" component={TabComponent} />
            <BottomTab.Screen name="search" component={TabComponent} />
            <BottomTab.Screen name="explore" component={TabComponent} />
            <BottomTab.Screen name="profile" component={TabComponent} />
          </BottomTab.Navigator>
        </NavigationContainer>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  safeAreaContainer: {
    flex: 1,
    backgroundColor: 'white',
  },
  centeredContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default App;

字符串
输出值：

的数据

赞(0）回复(0）举报 6个月前

我来回答

React Native 带有持久操作表的渲染底部选项卡

1条答案

相关问题

热门标签

最新问答