标签: react-navigation-v5

为了显示通知徽章，我发现可以使用反应导航中的 tabBarBadge。tabBarBadge 仅接受数字或字符串，而不接受函数，因此当用户专注于通知屏幕时，我无法找到禁用它的方法。我怎样才能禁用它？

在 tabBarIcon 中有 tabInfo.focused 让我们知道用户何时在此屏幕上。tabBarBadge 有类似的方法吗？

我的目标是为 提供顶部和底部导航栏Home, Dashboard, and Album，但不为SignIn. 问题是，我希望将按钮放在底部而不是顶部。

最后剩下的难题是如何Sign In向底部导航栏添加按钮。

障碍是，如果您编写<Tab.Screen name="Sign In component={SignIn} />并按下带有参数的按钮onPress={() => navigation.navigate('SignIn')}，它会将您导航到Tab.Screen而不是Stack.Screen。

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

const Stack = createStackNavigator();
function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen options={{title: ''}} name="MyTabs" component={MyTabs} />
      <Stack.Screen name="SignIn" component={SignIn} />
    </Stack.Navigator>
  );
}

export default function …

我们有一个利用 Branch.io 通用链接的应用程序。遵循以下文档： https://help.branch.io/developers-hub/docs/react-native#read-deep-link

在react-native应用程序上，您设置了一个订阅者来接收javascript运行时中的深层通用链接。

使用这里的最新版本react-navigation：https ://reactnavigation.org/docs/deep-linking

React Navigation 希望原生处理深层链接。React Navigation 似乎没有提供手动启动链接的好方法。

我如何同时使用这两项服务？事实证明，获取深层链接并将其分解为可路由的深层链接具有挑战性。我们的应用程序具有嵌套路由器，并且重新进行从路径到屏幕和参数的转换是我不想做的事情。最近有人这样做过吗？谢谢。

在使用 React Navigation 中的材质顶部选项卡时，如何更改活动选项卡的背景颜色？

现在的情况是这样的：

• 截图1
• 截图2

这是我的代码：

import React from 'react'
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import CrurrentOrders from './CrurrentOrders';
import PastOrders from './PastOrders';

const Tab = createMaterialTopTabNavigator();

const OrdersTabs = () => {
    return (
        <Tab.Navigator
            initialRouteName='CrurrentOrders'
            backBehavior='initialRoute'
            tabBarPosition='top'
            swipeEnabled={true}
            swipeVelocityImpact={0.2}
            springVelocityScale={0}
            sceneContainerStyle={{ backgroundColor: '#d1dfff', margin: 10, borderRadius: 20 }}
            style={{ backgroundColor: '#ffffff' }}
            tabBarOptions={{
                activeTintColor: '#ffffff',
                inactiveTintColor: '#ffffff',
                showIcon: true,
                pressColor: '#856',
                scrollEnabled: false,
                tabStyle: { backgroundColor: '#36A7E7', borderRadius: 30, margin: 12, justifyContent: 'center', alignContent: 'center' …

该图标显示在屏幕/页面中，但不会显示在底部导航中。我尝试过的解决方案：

• 按照github的安装指南进行操作，我尝试了GRADLE和MANUAL选项，但结果相同
• ./gradlew clean然后尝试过npx react-native run-android，但结果相同
• npx react-native link react-native-vector-icons 然后尝试过npx react-native run-android，但结果相同

屏幕截图底部导航栏

屏幕截图设置屏幕

它确实出现在屏幕/页面中，如上面的屏幕截图所示，但不会显示在底部导航中。

注意：我已经在模拟器和真实的 Android 设备中进行了测试，但仍然得到相同的结果！

底部选项卡的代码

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import ProductNavigation from './ProductNavigation'
import SettingScreen from '../screen/SettingScreen'



const BottomTab = createBottomTabNavigator();

const BottomTabNav = () => {
return (
    <BottomTab.Navigator>
        <BottomTab.Screen 
        name="Home" 
        component={ProductNavigation} 
        options={{
            tabBarLabel: "Home", …

有没有比以下更好的多条路线导航方法？

   NavigatorService.navigate('Screen1', params);
   NavigatorService.navigate('Screen2', params);

其中Screen1和Screen2是同一堆栈导航器中的兄弟姐妹。

活动选项卡上有一个默认的蓝色底部边框。但我无法改变这个边框颜色。有人可以告诉我如何更改此默认颜色吗？

const Tab = createMaterialTopTabNavigator();

const SpecificChannelNavigator = () => (
  <Tab.Navigator 
    tabBarOptions={{
      style: {
        // borderColor: colors['color-primary-500'],
        borderColor: "transparant"
      }
    }}
  >
    <Tab.Screen name={Routes.groupChat} component={GroupChat} />
    <Tab.Screen name={Routes.users} component={Users} />
    <Tab.Screen name={Routes.groupChatSettings} component={ChannelSettings} />
  </Tab.Navigator> 
);

export default SpecificChannelNavigator;

我希望应用程序检查是否有用户登录（firebase 身份验证）。如果有，则导航到一个页面（反应导航 v5），如果没有，则导航到另一页面。

我有以下代码：

在 App.js 中

//import navigation + screens

const Stack = createStackNavigator();
const MaterialBottomTabs = createMaterialBottomTabNavigator();

class App extends React.Component {

    AuthStack = () => {
      <Stack.Navigator>
        <Stack.Screen name="login" component={LoginScreen} />
        <Stack.Screen name="register" component={RegisterScreen} />
      </Stack.Navigator>
    }

createBottomTabs = () => {
      return <MaterialBottomTabs.Navigator>
          <MaterialBottomTabs.Screen name="first" component={firstScreen} />
          <MaterialBottomTabs.Screen name="second" component={secondScreen} />
        </MaterialBottomTabs.Navigator>
    }
render(){
      return(
        <LoadingScreen />
      )
    }
}

export default App;

在Loading.js中

import React from "react";
import { Text, SafeAreaView } from "react-native";
import …

旧值在焦点事件侦听器内返回

如何在事件侦听器中获取当前状态/值，因为它当前返回旧值

  const [organizationName, setOrganizationName] = React.useState('');

      React.useEffect(() => {
        const unsubscribeNavigationFocus = props.navigation.addListener(
          'focus',
          async () => {
        try {     
          console.log(organizationName, 'OLD VALUE');
        
    
          // }
        } catch (error) {
          console.log('inside error');
          console.log(error);
    
        } finally {
    
        }
      }
        );
    
        return unsubscribeNavigationFocus;
      }, [props.navigation]);

@react-navigation/native：“5.8.10”，react”：“16.13.1”，react-native：“0.63.4”，

当我从注册屏幕导航到主屏幕时，出现以下错误。我在 React Native 中使用了嵌套导航。这是我的 app.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import  {createDrawerNavigator}  from '@react-navigation/drawer';
import Profile from './src/components/Profile';
import SignUp from './src/components/SignUp';
import LoginScreen from './src/screens/LoginScreen'
import ViewAllBooks from './src/screens/ViewAllBooks'
import Home from './src/screens/Home'




const Stack = createStackNavigator();
//  for drawer navigation
const Drawer = createDrawerNavigator();
function Root() {
  return (

      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        
      </Drawer.Navigator>

  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="signUp"> …