标签: react-navigation

我正在尝试使用堆栈和标签导航器切换屏幕.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

在这种情况下,首先使用stacknavigator,然后使用tabnavigator.我想隐藏堆栈导航器的标题.当我使用像:::的导航选项时,它无法正常工作

navigationOptions: { header: { visible: false } }

我正在使用stacknavigator中使用的前两个组件上尝试此代码.如果我使用这一行然后得到一些错误,如::

我只是想知道关于这两个源的真实,经验和客观的观点,以实现React Native中的导航:

• 反应导航
• 反应原生导航

哪个更好,为什么.谢谢

我正在尝试使用react-navigation来创建一个没有tabbar和header的初始LOGIN屏幕,一旦用户成功通过身份验证,就会导航到另一个名为LISTRECORD的屏幕,该屏幕有一个tabbar,header和no back按钮选项.任何人都有这方面的经验,可以分享？

总之,我试图通过反应导航实现的目标如下所述......

屏幕1:登录屏幕(无标题和标签栏)经过
身份验证...
屏幕2:LISTRECORD(标题,标签栏和无后退按钮)
标签栏还包含其他标签,用于导航到屏幕3,屏幕4 ...

我正在使用反应原生导航(react-navigation)StackNavigator.它在应用程序的整个生命周期中从"登录"页面开始.我不想有后退选项,返回登录屏幕.有谁知道登录屏幕后它是如何隐藏在屏幕上的？顺便说一下,我还使用以下方法将其隐藏在登录屏幕中:

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

@react-navigation/stack与@react-navigation/native-stack有什么区别？

@react-navigation/stack 是否仅适用于 React 应用程序，而 @react-navigation/native-stack 仅适用于 React Native 应用程序？

• @react-navigation/stack - 每周下载 301,111 次
• @react-navigation/native-stack - 每周 24,830 次下载

import { createStackNavigator } from '@react-navigation/stack'
const Stack = createStackNavigator()

import { createNativeStackNavigator } from '@react-navigation/native-stack'
const Stack = createNativeStackNavigator()

[我不断收到错误消息，提示“字符串”不能分配给反应本机打字稿中“从不”类型的参数，我不知道为什么。有人可以帮我修复这个错误吗？

先感谢您。

代码片段：

const loadReport = (id: string) => {
    setPostId(id);
    navigation.navigate('Report', {postId: id});
}

我在“报告”下看到一条下划线。

在 Android 上运行应用程序时，我收到此错误。它构建正确，但因异常而崩溃。我已经安装了 React-native-screens、@React-native/navigation 以及https://reactnavigation.org/docs/getting-started/上列出的依赖项

com.facebook.react.common.JavascriptException：不变违规：requireNativeComponent：在 UIManager 中找不到“RNSScreenStackHeaderConfig”。

This error is located at:
    in RNSScreenStackHeaderConfig
    in Unknown
    in RNSScreen
    in N
    in ForwardRef
    in y
    in E
    in RNSScreenStack
    in w
    in RNCSafeAreaProvider
    in Unknown
    in v
    in Unknown
    in Unknown
    in Unknown
    in ForwardRef
    in Unknown
    in ForwardRef
    in p
    in c
    in P
    in RCTView
    in View
    in RCTView
    in View
    in h, stack:

它在 iOS 上构建和运行良好，但在 Android 上运行时它完全崩溃。我在这里忽略了什么吗？

这是我的包 json。

{
  "name": "<myprojectname>",
  "version": "0.0.1", …

我一直在寻找解决方案很长一段时间,但令人惊讶的是,我认为还没有人面对它.所以我发布它.

我用React Navigation V3创建了一个简单的Drawer Navigator.我添加了一个菜单图标,当我点击它时,抽屉显示应该是.但是,没有手势在起作用.从左向右滑动不做任何事情.即使抽屉打开,轻敲空的空间也不会关闭抽屉.

这是我的代码:

import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer,
    createDrawerNavigator
} from 'react-navigation';
import Home from './screens/Home';
import LoginForm from './screens/LoginForm';
import Articles from './screens/Articles';

const AuthStack = createStackNavigator({
    LoginScreen: LoginForm
});

const AppStack = createDrawerNavigator({
    HomeScreen: Home,
    ArticlesScreen: Articles
});

const RootNavigator = createSwitchNavigator(
    {
        Auth: AuthStack,
        App: AppStack
    },
    {
        initialRouteName: 'Auth'
    }
);

export default createAppContainer(RootNavigator);

使用反应导航时存在类型问题，当使用Stack.Navigation或Stack.Group来自createNativeStackNavigator

该问题表示JSX.element消息末尾的类型不匹配更具体： Type '{}' is not assignable to type 'ReactNode'

整个消息：

'Stack.Navigator' cannot be used as a JSX component.
  Its element type 'ReactElement<any, any> | Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: ReactNode; screenListeners?: Partial<...> | ... 1 more ... | undefined; screenOptions?: NativeStackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: NativeStackNavigationOptions | ... 1 mo...' is not a valid JSX element.
    Type 'Component<Omit<DefaultRouterOptions<string> & { id?: string | undefined; children: …

我在React Navigation和React Native 的导航方面遇到了问题.它是关于重置导航并返回主屏幕.

我在DrawerNavigator中构建了一个StackNavigator,主屏幕和其他屏幕之间的导航工作正常.但问题是,导航堆栈的增长和增长.我不知道如何从堆栈中删除屏幕.

例如,当从主屏幕进入设置屏幕,然后进入输入屏幕并最后再次进入主屏幕时,主屏幕在堆栈中是两次.使用后退按钮我不会离开应用程序,但再次进入输入屏幕.

再次选择主页按钮时,堆栈的重置会很好,但我不知道如何执行此操作.这里有人试图帮助其他有类似问题的人,但解决方案对我不起作用.

const Stack = StackNavigator({
  Home: {
    screen: Home
  },
  Entry: {
    screen: Entry
  },
  Settings: {
    screen: Settings
  }
})

export const Drawer = DrawerNavigator({
  Home: {
    screen: Stack
  }},
  {
    contentComponent: HamburgerMenu
  }
)

这是抽屉屏幕的一个简单示例

export default class HamburgerMenu extends Component {
  render () {
    return <ScrollView>
      <Icon.Button
        name={'home'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Home')}}>
        <Text>{I18n.t('home')}</Text>
      </Icon.Button>

      <Icon.Button
        name={'settings'}
        borderRadius={0}
        size={25}
        onPress={() => { this.props.navigation.navigate('Settings')}}>
        <Text>{I18n.t('settings')}</Text>
      </Icon.Button>

      <Icon.Button …