底部标签栏不应出现在任何地方，而应仅出现在通过React Native通过Webview呈现的第一个初始屏幕上

问题描述

我的项目中有一个webview组件，流程为=> bottomTabBar将打开提供给Webview源道具的url的初始屏幕，该屏幕应保留下来，当在Webview上单击任何链接并将其移至另一个屏幕时，不应出现bottomtabbar。

下面是我的WebviewScreen代码：

import React,{Component} from 'react';
import {WebView} from 'react-native-webview';
import {View,SafeAreaView,ActivityIndicator} from 'react-native';

export default class ConsultationHomeScreen extends Component {
  renderLoadingView = () => {
    return (
      <View style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}>
        <ActivityIndicator size="large" />
      </View>
    );
  };
  render() {
    const {url} = this.props.route.params;
    return (
      <SafeAreaView style={{flex: 1}}>
        <WebView
          source={{uri: url}}
          renderLoading={this.renderLoadingView}
          startInLoadingState={true}
          ref={(ref) => {
            this.webview = ref;
          }}
          onNavigationStateChange={(event) => {
            if (event.url !== url) {
              this.webview.stopLoading();
            }
          }}
        />
      </SafeAreaView>
    );
  }
}

和Appnavigation.js

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import LoginScreen from '../screens/authentication/LoginScreen';
import OtpScreen from '../screens/authentication/OtpScreen';
import AddChild from '../screens/Child/AddChild';
import AcceptInviteScreen from '../screens/AcceptInviteScreen';
import ConsultationHomeScreen from '../screens/ConsultationHomeScreen';
import HomeScreen from '../screens/HomeScreen/HomeScreen';
import PlansScreen from '../screens/PlansScreen';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function BottomTabBar() {
  return (
    <Tab.Navigator
      lazy={false}
      tabBarOptions={{
        labelStyle: {
          color: '#FF1493',fontSize: 15,},}}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{
          tabBarIcon: () => {
            <MaterialIcon name="home" color="#FF1493" size={20} />;
          },}}
      />
      <Tab.Screen
        name="Consult"
        component={ConsultationHomeScreen}
        initialParams={{
          url: 'some link',}}
      />
      <Tab.Screen name="Plans" component={PlansScreen} />
    </Tab.Navigator>
  );
}

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Stack.Navigator headerMode="none">
        <Stack.Screen name="login" component={LoginScreen} />
        <Stack.Screen name="otp" component={OtpScreen} />

        <Stack.Screen name="addchild" component={AddChild} />

        <Stack.Screen
          name="acceptinvitescreen"
          component={AcceptInviteScreen}
        />
        <Stack.Screen name="home" component={BottomTabBar} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

但是，无法删除底部标签栏，请问任何人建议我应该如何实现此行为？

Step1-> Webview初始屏幕呈现并具有bottomtabtabr 步骤2->在初始屏幕上单击链接，然后导航到Web源处理的下一个屏幕 步骤3->“底部”标签栏不应出现在任何地方，而应仅出现在第一个初始屏幕上

请提出任何建议，如果需要进一步了解，请告诉我。

解决方法

我在您的源代码中测试了此修改，它的工作原理很吸引人。

WebviewScreen.js中的GIT差异：

@@ -23,6 +23,7 @@ export default class ConsultationHomeScreen extends Component {
       }}
       onNavigationStateChange={(event) => {
         if (event.url !== url) {
+          this.props.navigation.setOptions({ tabBarVisible: false });
           this.webview.stopLoading();
         }
       }}

让我知道您是否有任何问题。