标签: react-navigation

我已经建立了一个网站，当我在主页上刷新时，它很好，但是当我导航到其他页面时，它也很好，但是当我刷新这些其他页面时

Cannot GET /otherpage\n

我正在使用反应导航，如果我超链接它，我认为它可能也不起作用。

\n\xef\xbb\xbfrequire('rootpath')();\nconst express = require('express');\nconst app = express();\n///\n///\napp.use('/accounts', require('./accounts/accounts.controller'));\n\nif(process.env.NODE_ENV === 'production'){\n \n  app.use(express.static('build'));\n\n \n\n  }\n

server.js\nbuild\n

文件目录

我该如何解决这个问题？

我正在尝试在屏幕标题标题的右侧渲染一个按钮。但我没有得到想要的结果。我参考了react-navigation官方文档。这是我的屏幕截图。
这是我的导航的代码片段。

 <NavigationContainer>
            <Stack.Navigator screenOptions={{
                headerStyle: {
                    backgroundColor: Colors.header.backgroundColor,
                },
                headerTintColor: Colors.header.fontColor,
                headerTitleAlign: 'left',
                headerTitleStyle: {
                    fontSize: Fonts.size.regular
                }
            }}>
                <Stack.Screen name='Home' component={Home} options={{
                    headerTitle: 'Seguro',
                    headerRight: () => {
                        <Button              // I want to render this button
                            onPress={() => console.log('This is a button!')}
                            title="Info"
                            color="#fff"
                        />
                    }
                }} />
                <Stack.Screen name='Login' component={Login} />
            </Stack.Navigator>
        </NavigationContainer>

我有一个 MaterialBottomNavigator，我想根据活动选项卡更改图标的颜色。我用过activeColor，inactiveColor但它不会改变颜色。

const Navigation = () => {
  return (
    <Tab.Navigator
      initialRouteName="About"
      activeColor="black"
      inactiveColor="#808080"
      barStyle={{backgroundColor: 'white'}}>
      <Tab.Screen
        name="About"
        component={About}
        options={{
          tabBarIcon: () => <Icon name="people" size={30} />,
        }}
      />
      <Tab.Screen name="Sketches" component={Sketches} />
    </Tab.Navigator>
  );
};

如果我不将颜色属性传递给图标，它就不会显示。那么我该怎么做呢？

在我的代码中，我在卸载组件时遇到问题。我正在使用抽屉导航器，当我在抽屉屏幕之间导航时，前一个屏幕并没有消失，当我再次打开该屏幕时，一切都还在那里。

但当我在抽屉屏幕之间导航时，我想重新渲染或卸载并再次安装组件。有办法吗？或者我如何手动卸载我的组件？我知道对此有很多疑问，但我找不到我想要的。

我的 React Native 版本是 0.63

我在反应本机中有以下导航设置：

const HomeTabs = createTopTabNavigator();

function HomeScreen() {
  return (
    <HomeTabs.Navigator>
      <HomeTabs.Screen name="Feed" component={FeedTab} />
      <HomeTabs.Screen name="Groups" component={GroupsTab} />
    </HomeTabs.Navigator>
  );
}

const SettingsTabs = createTopTabNavigator();

function SettingsScreen() {
  return (
    <SettingsTabs.Navigator>
      <SettingsTabs.Screen name="Profile" component={ProfileTab} />
      <SettingsTabs.Screen name="Change Password" component={ChangePasswordTab} />
    </SettingsTabs.Navigator>
  );
}

const RootStack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Settings" component={SettingsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );

}

其中Feed Tab有一个按钮，我需要使用它导航到Change Password Tab. 由于它位于不同的屏幕中，我怎样才能实现这一点？

Groups Tab …

我有一个自定义标头组件：

function CustomHeader() {
    return (
       <View style={{ height: headerHeight }}>
          {/* Some buttons in a row... */}
          <View 
            style={{ 
              position: "absolute",
              alignSelf: "center",
              top: headerHeight/2
            }} 
          />
       </View>
    )
}

正如您所看到的，我绝对将视图定位在标题的中心，顶部为 headerHeight/2。

为了获得标题高度，我正在做：

 import { useHeaderHeight } from "@react-navigation/elements";

 const headerHeight = useHeaderHeight();

但是...它返回我 0，就像我在堆栈导航器中所做的那样：

 screenOptions={{
    headerShown: false,
 }}

因为，我正在屏幕内渲染自定义标头。

我怎么解决这个问题？我需要获取堆栈导航器中使用的默认标题高度，以便对我的组件进行风格化。

我正在构建一个 React Native 应用程序。我正在使用 React Navigation，https://reactnavigation.org/进行导航。现在，我正在努力删除当前屏幕或屏幕历史记录，就像在本机 Android 中一样。

我尝试像下面这样重置它。

 props.navigation.reset({
                            index: 0,
                            routes: [{ name: "ItemDetails" }]
                        })

我在 ItemList 屏幕中调用该代码。但从主屏幕登陆到项目列表屏幕。如果我使用该代码，主屏幕也会从堆栈中删除。但我只想从堆栈中删除 ItemList 并保留主屏幕。我怎样才能做到这一点？

我正在开发一个项目，我想在一个选项卡中的屏幕之间切换。例如我有 4 个底部标签。从第一个选项卡，我想移动到第一个选项卡内的另一个屏幕或组件

从这张图片中，我想通过留在第一个选项卡内移动到另一个屏幕或组件。谁能帮助我找到可能的方法。

我的底部选项卡导航有问题。这是屏幕结构：

• 主选项卡：
  • 选项卡A
    • 屏幕A1
  • 标签B
    • 屏幕B1
    • 屏幕B2

我可以从屏幕 A1 导航到屏幕 B2（更改选项卡）。我可以从屏幕 B1 导航到屏幕 B2。

这是示例代码：

import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const TabAScreen1 = ({ route, navigation }) => {
  return (
    <View>
      <Text>Tab A screen 1</Text>
      <Button
        title="Go to tab B screen 2"
        onPress={() => { …

I am using react-navigation and I am having an issue with it. I am trying to make it so the application changes tabs when a user swipes. However, I can't get it to work.

I have tried gestureEnabled and swipeEnabled keys but it doesn't seem to have an effect.

What am I doing wrong?

App:

const { Navigator, Screen } = createStackNavigator();
return (
    <NavigationContainer>
      <Navigator>
        <>
          <Screen options={{headerShown: false}} name={'BottomTabsNavigator'} component={BottomTabsNavigator}/>
          {/* All other routes beside bottom Navigation ones …