标签: react-native-navigation

我正在尝试反应原生导航,但我遇到了一个简单的问题.

该应用程序有一个没有选项卡的登录页面.(非常类似于facebook登录页面)(图片参考 - 图片只是为了给出一个想法.图片礼貌 - 谷歌 用户登录后,我想转换为基于标签的应用程序,我想要两个不同的导航堆栈标签(在Quora等应用中发生)(图片参考 - 再次图像只是一个参考)

我使用mobx进行状态管理.

我知道这是一个常见的用例,但我对我所知的两个选项感到困惑 -

1. 提供对用户登录变量的反应,并从单屏应用程序更改为基于选项卡的应用程序.(唯一关注的是当isLoggedIn发生反应时缺少动画)例如 - App.js

   constructor() {
   reaction(() => auth.isLoggedIn, () => app.navigateToHome())
   reaction(() => app.root, () => this.startApp(app.root));
   app.appInitialized();
   

   Run Code Online (Sandbox Code Playgroud)

   }

   startApp(root){
       switch (root) {
         case 'user.login':
           Navigation.startTabBasedApp({
             tabs: [
               {
                 label: 'One',
                 screen: 'user.login',
                 icon: require('./assets/one.png'),
                 selectedIcon: require('./assets/one_selected.png'),
                 navigatorStyle: {},
               }
             ]
             screen: {
               screen: root,
               title: 'Login',
               navigatorStyle: {
                 screenBackgroundColor: colors.BACKGROUND,
                 statusBarColor: colors.BACKGROUND
               },
               navigatorButtons: {}
             }
           })
           return ;
         case 'user.home':
           Navigation.startTabBasedApp({
             tabs: [ …

   Run Code Online (Sandbox Code Playgroud)

我的应用程序在调试模式下在模拟器上运行正常.当我尝试在设备上使用已签名的APK或在模拟器上以释放模式运行时使用:

react-native run-android --variant=release

它只是一个空白的白色屏幕,不加载.

我正在使用React-Native-Navigation和React-Native-Firebase,这可能会也可能不会导致问题.

我看到的一个错误与我认为的Firebase有关:

W/GooglePlayServicesUtil:Google Play服务已过期.需要11717000但是发现10298470 11-20 11:24:04.624 16106-16106 /？W/FA:

这failed to send app launch当然看起来很不祥.

编辑:我不确定上面的错误实际上是在我的设备上运行发布版本时导致空白屏幕.此消息显示在模拟器中,但我的应用程序在模拟器上工作.在我的设备上,我看到Google Play服务的版本是11.7.46,我认为应该可以正常使用.

还有什么能让我的应用只在发布时成为空白屏幕吗？

编辑2:

我这次发现了另一个错误(我已经降级到了旧版本的react-native-firebase 2.2)

11-25 12:11:07.278 5281-5295/com.spectrum E/FirebaseCrash:无法加载崩溃报告com.google.android.gms.internal.mn:..com.google.android.gms.dynamite.DynamiteModule $ zzc :远程加载失败.没有发现本地回退.来自com.google.fire.firebase.crash.zzc.zzFi(未知来源)的com.google.android.gms.internal.ml.zzFk(未知来源),位于java.util.concurrent.FutureTask.run(FutureTask.java:237) )java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)at java.util.concurrent.ThreadPoolExecutor $ Worker.run(ThreadPoolExecutor.java:588)at java.lang.Thread.run(Thread.java: 818)由以下原因引起:com.google.android.gms.dynamite.DynamiteModule $ zzc:远程加载失败.没有发现本地回退....

编辑3:

以下是来自的依赖项app.gradle:

dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:25.0.1"
compile "com.facebook.react:react-native:+"  // From node_modules
compile project(':react-native-navigation')

// RNFirebase required dependencies
compile(project(':react-native-firebase')) {
    transitive = false
}
compile "com.google.firebase:firebase-core:11.0.4"

// RNFirebase optional dependencies
compile "com.google.firebase:firebase-crash:11.0.4"
compile …

我试图Navigate.push从sideMenu 打电话,但没有任何反应.

Navigation.setRoot({
    root: {
      sideMenu: {
        left: {
          component: {
            name: 'app.SideMenu',
          },
          children: [
           {
             stack: {
             children: [
                {
                  component: {
                    name: TERMS_SCREEN.id,
                  }
                },
             ]
           }
        }
      ]
        },
        center: {
          bottomTabs: {
            id: 'BottomTabsId',
            options: {
              topbar: {
                visible: true,
              }
            },
            children: [
              {
                stack: {
                  id: 'Tabs',
                  children: [
                    {

..而我正试图像这样在sideMenu中推出一个屏幕

console.log(this.props.componentId);
Navigation.push(this.props.componentId, {
  component: {
    name: 'app.Terms',
  }
})

我收到日志但没有任何反应.我很肯定我需要对我的布局做一些事情,但我没有在文档中看到示例或解释.

我在堆栈树中有一个模态组件。有没有办法检查模态当前是否打开？

我正在使用 react-native-navigation 版本 2.18.5

我使用 react 导航版本创建了一个自定义抽屉导航器：5.X，但是当前活动选项卡没有在自定义抽屉菜单中突出显示。

1. 我在 DrawerItem 元素中添加了“activeTintColor”，但它没有应用于活动项目。
2. 我还在 drawerContentOptions 中添加了 activeTintColor。但也没有得到应用。他们有什么方法可以在自定义抽屉组件中使用这个常用选项吗？
3. 我在 DrawerItem 元素中使用了“图标”，根据反应导航文档，我在其中添加了默认道具（颜色、焦点、大小）。因此，图标的颜色为“灰色”（可能是默认行为）。如何更改此默认道具值？
4. “图标”中的默认道具“聚焦”也不起作用。所选选项卡的图标未更改。

请找到下面的代码图像。如果我犯了任何错误，请告诉我。

导航代码：

自定义抽屉组件：

当前活动标签：主页

我是 React Native 的新手，我收到了这个错误，但我无法解决它。

我正在关注主要react-navigation 页面中的教程，但我无法完成它。

我将不胜感激任何帮助。谢谢！

    import * as React from 'react';
import { Text, View } from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
    return ( <
        View style = {
            { flex: 1, alignItems: 'center', justifyContent: 'center' }
        } >
        <
        Text > Home Screen < /Text> < /
        View >
    );
}

const Stack = createStackNavigator();
export default function App() {
    return ( <
        NavigationContainer …

REACTNATIVE ：当前使用Linking.openSettings()打开我的应用程序设置页面。

现在，我想直接打开应用程序权限屏幕，它位于应用程序设置中，以使用 REACT NATIVE 在 Android 和 iOS 中启用位置、存储等权限。

有什么可能吗？提前致谢！

使用自定义样式删除 React 导航 6 中的标头，这是堆栈导航的代码

 <NavigationContainer>
  <Stack.Navigator
    initialRouteName='OtpScreen'
    // screenOptions={{
    //   headerShown: false,
    // }}
    screenOptions={{ headerMode: 'none' }}
  >
    <Stack.Screen
      options={{ headerShown: false }}
      name='Tabs'
      component={MyTabs}
    />

  </Stack.Navigator>
</NavigationContainer>

标签导航

   <Tab.Navigator
  useHeaderHeight={false}
  screenOptions={
    ({
      headerShown: false,
    },
    ({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
        } else if (route.name === 'Settings') {
          iconName = focused ? 'ios-list' : 'ios-list';
        } …

嘿，我正在使用 React Navigation 中的 createBottomTabNavigator()，并且我有一个自定义顶栏，我用自己的状态更新它。问题是，当我单击选项卡时，每次导航都会调用侦听器，因此如果您转到屏幕 2，则顶部栏会进入错误的状态，顶部栏会更改为屏幕 2。当我按下顶部栏后退按钮时，它会返回到屏幕 1 并将顶部栏更改为屏幕 1 顶部栏。现在，如果我使用底部栏选项卡而不是使用顶部栏选项卡向后导航，它会使顶部栏远离屏幕 2。所以我的问题是，如果我按底部栏，它会导航回初始屏幕，我是否可以以某种方式禁用它1.

 <Tab.Screen
      listeners={() => {
              switchTab(0);
            }}
            name="Input"
            children={() => (
              <SuchStackContainer
                ref={suchStackRef}
                switchStack={switchStack}
                listings={listings}
                setListings={setListings}
              />
            )}
            options={{
              tabBarLabel: 'Suche',
              tabBarIcon: ({color, size}) => (
                <Ionicons name="car" color={color} size={size} />
              ),
            }}
          />

我被困。我正在使用 React Native CLI 和 React Navigation 6.x 开发移动应用程序，然后当我使用材料顶部选项卡导航器时，从左到右或从右到左滑动。它总是发送警告

我尝试过 useFocusEffect、addListeners

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
import React, {useEffect} from 'react';
import AScreen from '../screens/Home/AScreen';
import BScreen from '../screens/Home/BScreen';

const Tab = createMaterialTopTabNavigator();
const HomeStack = () => {
  useEffect(() => {
    console.log('HomeStack');
  }, []);

  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#fff',
        tabBarStyle: {
          borderTopWidth: 0.2,
          borderTopColor: '#ccc',
        },
        tabBarIndicatorStyle: {
          backgroundColor: '#fff',
        },
        lazy: true,
      }}
      initialRouteName="A"
      shouldRasterizeIOS>
      <Tab.Screen name="A" component={AScreen} />
      <Tab.Screen name="B" component={BScreen} />
    </Tab.Navigator>
  );
};

export default …