我已经通过反应导航在我的应用程序中实现了主题支持，如下所示。我正在使用系统主题设置，并且我的应用程序遵循此规则，这工作得很好，但是我的待办事项列表中还剩下一件事，即在我的应用程序中切换浅色/深色主题的选项，保留此选择并存储它进入用户默认值或类似的东西..

我遵循了官方文档（https://reactnavigation.org/docs/themes/），但他们没有提到如何手动切换主题。在我的测试中，我总是收到一条消息，主题道具是只读的，无法手动更改。那么该怎么做呢？任何帮助将不胜感激；）

应用程序.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { AppearanceProvider, useColorScheme, useTheme } from 'react-native-appearance';

const Stack = createStackNavigator();

// ------------------App-----------------------------
export default function App() {

    const scheme = useColorScheme();

    const MyDarkTheme = {
    dark: true,
    ...},
    const LightTheme = {
    dark: false,
    ...}
    
    return (
      <AppearanceProvider>
        <NavigationContainer theme={scheme === "dark" ? MyDarkTheme : LightTheme}>
          <Stack.Navigator>
          <Stack.Screen>
            name="home"
          ...
          <Stack.Screen
            name="Settings"
            component={Settings}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </AppearanceProvider>
    );
  }

在我的组件中：

import …

嘿，我在使用多个Stack.Navigator时遇到透明度问题。

我创建了 2 个Stack.Navigators -> 一个用于Screens，一个用于Popups。问题是，我的弹出窗口具有透明背景，在这种情况下，我需要在背景中显示屏幕。它在 react.navigation v4 中工作，现在在 v5 中我找不到任何解决方案来解决这个问题。

零食 https://snack.expo.io/@m.jachym/react-navigation-stacks-transparency

导航结构 img

*有两个Stack.Navigator s，因为Stack.Navigator for Popups有不同的和更复杂的screenOptions。此外，在有关嵌套导航器的文档中，建议将一个Stack.Navigator放在另一个中。在这种情况下，问题是，当您设置父级Stack.Navigator headerMode="screen" 和子级Stack.Navigator headerMode="none" 时，子级的 headerMode 是从父级继承的。其他属性也存在同样的问题 - 这就是为什么我的导航结构保持原样的原因。

我知道我做错了什么，或者这就是新版本的 react-navigation 的问题，我应该写信给 react-navigation 团队吗？*

我正在使用 react-navigation 版本 5。我有标签导航和抽屉导航。

我正在尝试在我的标题中添加一个图标来打开/关闭抽屉：

这是我用于切换抽屉的自定义右侧标题：

const HeaderRight = ({ navigation }) => {   
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity
        onPress={ () =>{ navigation.toggleDrawer()}}>  //here is the problem
          <Image source={require('./assets/images/icons/drawer.png')}/>
        </TouchableOpacity>
      </View>
    );}

这是我的标签导航器：

const Tab = createBottomTabNavigator();
function AppTab() {
  return (
     <Tab.Navigator>         
        <Tab.Screen name="Category" component={Category} />    
        <Tab.Screen name="Home" component={Home}/>
      </Tab.Navigator>
   );}

抽屉导航：

    const Drawer = createDrawerNavigator();  
    function App() {
      return (    
          <Drawer.Navigator>
            <Drawer.Screen name="AppTab" component={AppTab} />
            <Drawer.Screen name="Notifications" component={NotificationsScreen} />
          </Drawer.Navigator>  
      );}

和我的堆栈导航器到主题混合所有：

const Stack = createStackNavigator();
  export …

我正在制作一个项目（react native、expo、react navigation 5），我想在底部选项卡中添加一个自定义“添加”按钮，但因为......

导航器只能包含“屏幕”组件作为其直接子组件

...我需要找到一种方法来传递我的自定义组件。

看起来很简单，我的意思是有文档：

• https://reactnavigation.org/docs/material-bottom-tab-navigator
• https://reactnavigation.org/docs/bottom-tab-navigator
• https://reactnavigation.org/docs/custom-navigators/

...但是在查看这些问题和其他人的问题时，我要么只找到了很多复杂的示例，要么找到了如何在早期版本中实现此目的的示例。

最后，我找到了一个简单的解决方案，到目前为止，它的效果就像一个魅力（非常感谢任何关于为什么这可能是一个糟糕的想法的建议）。

我想如果有人遇到类似的问题，我会发布我的解决方案。请参阅下面的答案。

我正在将我的项目从 升级react-navigation-v4到react-navigation-v5. 我需要在同一屏幕内有两个顶部栏，将屏幕分为两半，但这样做会出现此错误：

错误：已为此容器注册另一个导航器。您可能在单个“导航容器”或“屏幕”下有多个导航器。确保每个导航器位于单独的“屏幕”容器下。

我搜索了很多，我知道我可以嵌套它们，但是如何将它们一起使用？

这是我的代码，给出了错误：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Page1 from './pages/Page1'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();
const BottomTab = createMaterialTopTabNavigator();

const TopTabComponent = () => (
  <TopTab.Navigator>
    <TopTab.Screen name='1' component={Page1} />
    <TopTab.Screen name='2' component={Page1} />
  </TopTab.Navigator>
)

const BottomTabComponent = () => (
  <BottomTab.Navigator>
    <BottomTab.Screen name='3' component={Page1} />
    <BottomTab.Screen name='4' component={Page1} />
  </BottomTab.Navigator>
)


export default class App extends React.Component {
  render() …

在React Native 0.62是否有可能隐藏滚动与创建的TabBarcreateBottomTabNavigator从reactnavigation.org？

我很好奇是否有可能以类似于 LinkedIn 的方式，当您向下滚动页面时，标签栏会消失，而当您向上滚动时，它会重新出现。还是只能使用自定义标签栏？

提前感谢您帮助解决这个问题。

一些上下文（无双关语）

我正在从事一个公司的项目，该项目将限制我将所有代码都放在这里，但我会尝试在不泄露国家机密的情况下尽可能多地放置相关代码。

基本上，React Native 应用程序使用的是 React Navigation v5，我已经尝试解决这个问题两天了。我明白发生了什么，但我不明白为什么会发生或如何解决它。

在应用程序代码中的某处，您有以下代码。

export const Lounge = function Lounge(props: {navigation: any}) {
  
  const {navigation: {setOptions}} = props
  const bottomTabBarCtx = useContext(BottomTabBarContext)

  // const [routeName, setRouteName] = useState("LoungeList")

  useEffect(() => {
    setOptions({tabBarVisible: bottomTabBarCtx.isVisible})
  }, [bottomTabBarCtx.isVisible, setOptions])

  return <Stack.Navigator initialRouteName={"LoungeList"}>
    <Stack.Screen
      name="LoungeList"
      component={List}
      options={{headerShown: false}}
    />

    <Stack.Screen
      name="LoungeDetails"
      component={Details}
      options={{
        headerLeft : buttonProps => <BackButton {...buttonProps} />,
        headerRight: buttonProps => <LoungeHeaderRightDetailsButton {...buttonProps} />,
        headerTitle: 'Lounge Details',
      }}
    />

    <Stack.Screen
      name="LoungeParticipants"
      component={Participants}

      options={{
        headerLeft : buttonProps …

使用react-navigation v5，如何将所有屏幕单独包装在滚动视图和键盘安全视图中？

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Test" component={TestScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

在我的反应本机项目中，我正在使用库

"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",

我有嵌套的导航器，如下所示：

// root level I have a stack navigator where it contains two screens, `Home` and `Settings`.
const App = ()=> {
  const rootStack = createStackNavigator();
  return (
    <NavigationContainer>
      <rootStack.Navigator>
        <rootStack.Screen name="Home" component={Home} />
        <rootStack.Screen name="Settings" component={Settings} />
      </rootStack.Navigator>
    </NavigationContainer>
  );
}

// The Settings screen is a nested stack navigator
const Settings = ()=> {
  const settingsStack = createStackNavigator();
  return (
    <settingsStack.Navigator>
      <settingsStack.Screen name="SettingsOne" component={SettingsOneScreen} />
      <settingsStack.Screen name="SettingsTwo" component={SettingsTwoScreen} />
    </settingsStack.Navigator>
  );
}

正如您所看到的，“设置”屏幕实际上是另一个级别（嵌套）堆栈导航器。 …

我想创建一个顶部选项卡导航器，并将两个屏幕 Badges.js 和 Studying.js 放入选项卡中，当我在设备上运行它时，我收到一条错误，显示“错误：元素类型无效：需要一个字符串...”并且“检查‘MaterialTopTabNavigator’的渲染方法”。

TabScreen.js

import React from 'react';
import {View, Image, Text} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import Badges from './Badge';
import Studying from './Studying';

const Tab = createMaterialTopTabNavigator();

const TabsScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Badges" component={Badges} />
      <Tab.Screen name="Studying" component={Studying} />
    </Tab.Navigator>
  );
};
export default TabsScreen;

徽章.js

import React from 'react';
import {View, Image, Text} from 'react-native';

const Badges = () => {
  return (
    <View>
      <Text>Badges</Text> …