标签: react-navigation-stack

我的 React Native 0.61.5 使用react-navigation 5.1. 这是根导航代码：

const BTab = createBottomTabNavigator();
const Stack = createStackNavigator();
export default function App() {

  //const Appscreen = () => (<AppScreen data={data}/>);

  return (
    <NavigationContainer>
      <Stack.Navigator InitialRouteName="Splash">
        <Stack.Screen name="Splash" component={SplashScreen}}/>
        <Stack.Screen name="App" component={AppScreen} } />
      </Stack.Navigator>

    </NavigationContainer>
  );
}

该组件AppScreen返回一个如下所示的堆栈：

return (
    <NavigationContainer independent={true}>
      <BTab.Navigator>
          <BTab.Screen name="Event" component={Eventstack} />
          <BTab.Screen name="Group" component={Groupstack} />
          <BTab.Screen name="Contact" component={Contactstack} />
      </BTab.Navigator>
    </NavigationContainer>
  );

我注意到屏幕上有双标题：

如何删除App标题并只保留Group？

我的HomeHeader组件是这样的：

import React from "react";
import { View, StyleSheet, Text, Image } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome5";

export default function HomeHeader({ navigation }) {
  return (
    <View style={styles.home_header}>
      <Icon
        style={styles.menu}
        name="bars"
        size={30}
        color="white"
        onPress={navigation.toggleDrawer()}
      />

      <Image
        style={styles.header_logo}
        source={require("../assets/logo.png")}
      />
      <Text>Hello</Text>
    </View>
  );
}

并在我的主屏幕中使用它，如下所示：

return (
  <View>
    <HomeHeader navigation={navigation} />
  </View>
)

但我收到此错误消息：

警告：无法从不同组件的函数体内部更新组件。

我想要做的是，我已将 HOME 屏幕的标题部分分离到一个名为 HomeHeader 的单独组件中。在这个组件中，我附加了事件处理程序来切换 DrawerNavigation（左侧抽屉菜单）的打开/关闭

如果我在主屏幕中创建一个 Button 并添加事件处理程序来切换抽屉，它工作正常。但是只有当我从我的 HomeHeader 组件内部尝试这个问题时才会发生。

顺便说一句，我正在使用 ReactNavigation v5，我什至尝试过这种方法：https ://reactnavigation.org/docs/connecting-navigation-prop/

到目前为止没有运气。

此问题的用例是让抽屉菜单（如“设置”）仅在“主屏幕”中可用。在“主屏幕”上可能有许多按钮链接到堆栈导航的其他屏幕，其中抽屉不可用。

主要问题是如何仅在 Stack Navigator 的特定屏幕上启用抽屉导航？在下面的示例中，抽屉在堆栈的所有页面上都可用。我尝试过gestureEnabled但没有成功：

  const StackHome = () => (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Example1" component={Example1} />
      <Stack.Screen name="Example2" component={Example2} />
    </Stack.Navigator>
  );
  <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={StackHome} />
      <Drawer.Screen name="Settings" component={Settings} />
  </Drawer.Navigator>

另一方面，如果我尝试将其作为屏幕Drawer之一Stack，那么我总是有相同的标题栏（例如“标题”）

我已经像本文档所述编写了类型定义，但是当我使用嵌套导航时出现了问题。

这里是示例代码：

在我的App.tsx

export type MainStackParamList = {
  Setting: undefined
}
export type TabParamList = {
  Home: undefined
  Personal: undefined
}
const MainStack = createNativeStackNavigator<MainStackParamList>()
const Tab = createBottomTabNavigator<TabParamList>()
const RootStack = createNativeStackNavigator()

const MainStackScreen = () => (
  <MainStack.Navigator screenOptions={{ headerShown: false }}>
    <MainStack.Screen name="Setting" component={Setting} />
  </MainStack.Navigator>
)

const TabScreen = () => (
  <Tab.Navigator screenOptions={{ headerShown: false }}>
    <Tab.Screen name="Home" component={Setting} />
    <Tab.Screen name="Personal" component={Setting} />
  </Tab.Navigator>
)

const RootStackScreen = () => ( …

//app.js "react": "16.9.0","re​​act-native": "0.61.5",官方按照官方文档但是显示黑屏 React Native

import React from 'react';
import { SafeAreaView, StatusBar, View, Text } from 'react-native';
import { Provider } from 'react-redux';
import configureStore from './App/redux/store/store'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppSplashScreen from './App/screens/splashScreen/SplashScreen';
const Stack = createStackNavigator();


function MyStack() {
 return (
        <Stack.Navigator>
          <Stack.Screen name="Home" component={AppSplashScreen} />
        </Stack.Navigator>
 );
}

export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {}
   }

   render() {
        return ( …

我想隐藏屏幕标题，但仍然在堆栈导航器中显示后退按钮？我在 Stack.Navigator 中设置了 screenOptions={{ headerShown: false }} ，它隐藏了屏幕标题和后退按钮。我想隐藏屏幕标题。

有人可以帮忙吗？下面是我的堆栈导航器：

function SearchStack() {
   return (
     <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="SearchScreen" component={SearchScreen} />
        <Stack.Screen name="SearchListScreen" component={SearchListScreen} />

     </Stack.Navigator>
   );
}

在选项卡导航器中，堆栈设置为：

   <Tab.Navigator screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {...})}> 
    <Tab.Screen name="Search" component={SearchStack} />
   </Tab.Navigator>  

这就是我目前看到的：

但这就是我希望我的选项卡导航栏仍然位于搜索堆栈底部的情况：

这是我在 Stack.Navigator 中使用 options={{headerMode:"none"}} 得到的结果：

将 Stack.Navigator 更新添加到 <Stack.Navigator screenOptions={{ headerTitle:"", headerTransparent:true }}> 时，会发生以下情况。如何将后退按钮添加或移动到顶部，就像第二张图片一样，这是在不将堆栈添加到 Tab.Screen 时实现的，因此进行更改：

<Tab.Screen name="Search" component={SearchStack} />

到

<Tab.Screen name="Search" component={SearchScreen} />

但这样做会导致该选项卡不会出现在搜索列表屏幕中。