react-native navigation stack 设置推送组件然后覆盖父页面

Question

主页有两个堆栈屏幕

并且其中一个屏幕有描述文字。其他屏幕有按钮并显示其他 stck 视图

这是主要的

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Calc from './Calc';
import Complete from './Complete';

const Stack = createNativeStackNavigator();

function Home() {
  return (
    <Stack.Navigator initailRouteName="Calc">
      <Stack.Screen
        name="Calc"
        component={Calc}
        options={{headerShown: false}}
      />

      <Stack.Screen
        style={styles.preview}
        name="Complete"
        component={Complete}
        options={{title: 'complate', headerShown: true}}
      />
    </Stack.Navigator>
  );
}


this is calc
  return (
  <Pressable onPress={() => navigation.push('Complete')}>
        <Text>calc</Text>
      </Pressable>
)

这是完整视图

如何删除主页文本？

Answer 1

将此选项添加到您的主屏幕而不是嵌套屏幕，基本上是将其添加到顶级导航器而不是嵌套导航器

options={{headerShown: false}}

还要注意这个错字:

initailRouteName 
//should be
initialRouteName

Answer 2

react-navigation v6

headerShown: false

function Home() {
  return (
    <Stack.Navigator
      initailRouteName="Calc"
      screenOptions={{
        headerShown: false,
      }}>
      <Stack.Screen
        name="Calc"
        component={Calc}
        options={{headerShown: false}}
      />

      <Stack.Screen
        style={styles.preview}
        name="Complete"
        component={Complete}
        options={{title: 'complate', headerShown: true}}
      />
    </Stack.Navigator>
  );
}

Answer 3

可能是我想看看主堆栈。

我的意思是主页视图在哪里调用？或显示？

你会

  <Tab.Screen
    name="Home"
    component={Home}
    options={{
      headerShown: false,
      
    }}

react-native navigation stack 设置推送组件然后覆盖父页面

react-native navigation stack set push component then cover parent page

react-native

react-navigation-stack