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

Question

我的项目中有一个 webview 组件，其中的流程是 => bottomTabBar 打开 url 的初始屏幕，该屏幕提供给 Webview source prop，应该保留，当在 webview 上单击任何 link 并移动到另一个屏幕时，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>
  );
}

但是，我无法删除 bottomtabbar，有人可以建议我应该如何实现此行为吗？

Step1-> Webview 初始屏幕呈现并具有 bottomtabtabr Step2-> Link 单击初始屏幕并导航到由 Web 源处理的下一个屏幕 Step3->底部标签栏不应出现在任何地方，而只能出现在第一个初始屏幕上

如有任何建议，我们将不胜感激，如果还需要其他任何内容以便更好地理解，请告诉我。

Answer 1

我在你的源代码中测试了这个修改，它非常有效。

GIT 与 WebviewScreen.js 的区别：

@@ -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();
         }
       }}

如果您有任何问题，请告诉我。

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

Bottom tab bar should not occur anywhere but only on the first initial screen that renders via Webview in React Native

react-native

react-native-android

react-navigation

react-native-webview

react-navigation-bottom-tab