标签: react-navigation

我创建了一个运行良好的 stackNavigator（用于登录注册屏幕），然后我创建了 bottomTabsNavigator 但由于某种原因我收到此错误“创建路由器不是功能”检查下面的屏幕截图：

这是我的代码：

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

/** Bottom tab navigator */
const Tab = createBottomTabNavigator();

const MyTabs = () => {
  return (
    <Tab.Navigator initialRouteName="Tab1">
      <Tab.Screen name="Tab1" component={Tab1} />
      <Tab.Screen name="Tab2" component={Tab2} />
      
    </Tab.Navigator>
  );
};

const App = () => {
  return (
    <Provider store={store}>
        <NavigationContainer>
          <MyTabs />
        </NavigationContainer>
    </Provider>
  );
};

我完全按照 React Navigation 5.x 文档的建议做了，但我仍然遇到了这个问题。如果有人遇到类似的情况，请告诉我。

我迁移我的博览会项目以响应本机项目。我删除了 expo 并尝试使用本机方式添加启动画面和推送通知，并在没有 expo 的情况下添加字体。我还在没有博览会的情况下使用本机方式安装了反应导航。我使用 android studio 和 Xcode 运行该项目。我有一些问题，但我通过修复我的 package.json 文件中的一些包版本来修复它们现在我收到这个错误：

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See ... for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: ***
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ …

如果用户登录，我想有条件地隐藏我的选项卡之一，

所以我有 5 个选项卡如果用户登录\注册我从 redux 商店得到一个布尔值，如果这个用户登录我想如何“库选项卡”如果没有登录，我不想与其他人一起显示这个选项卡“库”只需在应用程序中保留 4 个标签

代码

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';

let {isLogin} = store.getState().user;


const TabHome = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: 'Home',
      },
    },
    Browse: {
      screen: Browse,
      navigationOptions: {
        tabBarLabel: 'Browse',
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        headerShown: false,
      },
    },
    Radio: {
      screen: Radio,
      navigationOptions: {
        tabBarLabel: 'Radio',
      },
    },
    Library: isLogin ? (
      {
        screen: YourLibrary,
        navigationOptions: {
          tabBarLabel: 'Library',
        }, …

每次到达特定屏幕（在我的情况下，主页）时，我都试图重置导航堆栈。

这是一段代码：

componentDidMount(){
        const { navigation } = this.props

        this.focusListener = navigation.addListener('focus', () => {
            this._getData()
            console.log('coucou')
            navigation.dispatch(
                CommonActions.reset({
                  index: 0,
                  routes: [
                    { name: 'Home' },
                  ],
                })
            );
        });
        this._updateNavigationParams()
    }

    componentWillUnmount() {
        // Remove the event listener before removing the screen from the stack
        this.focusListener.remove();
    }

如果我删除以下部分，我的代码可以正常运行没问题：

navigation.dispatch(
                    CommonActions.reset({
                      index: 0,
                      routes: [
                        { name: 'Home' },
                      ],
                    })
                );

我需要一个监听器，因为当我回到 HomeScreen 时我必须刷新数据，而且每次我回到这里时我也会用它来重置导航堆栈。

我得到的错误是：

类型错误：this.focusListener.remove 不是函数。（在 'this.focusListener.remove()' 中，'this.focusListener.remove' 未定义）。

我想向屏幕传递一个道具。当我尝试内联时，例如(props) => <Comp {...props} {...customProps} />我收到一条警告消息，我不应该将函数解析为该组件属性。好的。我以为我会为每个需要自定义道具的组件创建函数。它正在工作，但有更好的解决方案吗？这是我的组件：

export default function Loading() {
  const [loggedIn, setLoggedIn] = React.useState(false);
  const Stack = createStackNavigator();
  const authService: AuthService = new AuthService();
  const authProps: IAuthProps = {
    authService
  };
  /**
   * Bind neccessary props to the login component
   * @param props Props
   */
  function LoginWithProps(props) {
    return <Login {...props} {...authProps} />;
  }
  /**
   * Bin neccessary props to the registration component
   * @param props Props
   */
  function RegistrationWithProps(props) {
    return <Registration {...props} {...authProps} />; …

我正在使用 React Navigation5。我有一个选项卡导航器，想清除单击选项卡上的选项卡历史记录。例如，我在选项卡 1 上，然后转到选项卡 2。从选项卡 2，我导航

屏幕1->屏幕2->屏幕3

现在如果我点击选项卡，它应该进入初始屏幕（screen1）。但它不起作用，它以错误的方式工作。这是我的代码。

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CommonActions, StackActions } from '@react-navigation/native';


// Custom imports:
import StartScreen from '../screens/start/StartScreen';
import ProductsScreen from '../screens/products/ProductsScreen';
import AddCustomerScreen from '../screens/customers/AddCustomerScreen';
import CustomersScreen from '../screens/customers/CustomersScreen';
import WebviewScreen from '../screens/webview/WebviewScreen';

// Menu Screen
import MenuScreen from '../screens/menu/MenuScreen';
import CurrentAccountScreen from '../screens/menu/CurrentAccountScreen';
import AccountDetailScreen from '../screens/menu/AccountDetailScreen';
import AppInfoScreen from '../screens/menu/AppInfoScreen';
import MessagesScreen from '../screens/menu/MessagesScreen';

import { …

所以我嵌套了导航器

Main BottomTab.Navigator

• 配置文件底部选项卡 # 1 (Stack.Navigator)
  • 个人资料视图（屏幕）
  • 追随者（屏幕）
  • 关注（顶部 Tab.Navigator）
    • 页面（屏幕）
    • 组（屏幕）
• 进料底部标签 #2（堆叠）
• 其他一些底部选项卡 #3（堆栈）

问题是当我从 Profile View Screen 导航到 Follow Navigator 时，我将一些参数传递给了父 Follow Navigator，并且我希望所有这些参数都在子选项卡屏幕（页面/组）中。

但是子选项卡屏幕的路由没有获取传递给父导航器的参数（以下选项卡导航器）

有没有办法做到这一点？

这是我的代码： 配置文件堆栈

const ProfileStack = () => (
  <Stack.Navigator
    initialRouteName='profileView'
  >
    <Stack.Screen
      name='profileView'
      component={ProfileScreen}
      options={{
        headerMode: 'screen',
        headerShown: false,
      }}
    />

    <Stack.Screen
      name='followers'
      component={FollowersScreen}
      options={{
        headerTitle: 'Followers',
      }}
    />
    <Stack.Screen
      name='following'
      component={FollowingTabs}
      options={{
        headerTitle: 'Following',
      }}
    />
 </Stack.Navigator>

跟随标签

const Tabs = createMaterialTopTabNavigator();
export const FollowingTabs …

当它处于焦点时，我需要更改标签的 fontSize 。我试过了，但没有任何效果。

我找到了“activeLabelStyle”道具，但它不起作用。

谢谢！

我的代码：

export const AppNavigation = () => {
  const Stack = createStackNavigator();
  const Tab = createBottomTabNavigator();

  const MainTabNavigator = () => {
    return (
      <Tab.Navigator
        tabBarOptions={{
        labelPosition: "beside-icon",
        activeTintColor: "white",
        style: {
        backgroundColor: "black",
      },
      labelStyle: {
        fontSize: 20,
      },
      tabStyle: {
        fontSize: 10,
      },
    }}
  >
    <Tab.Screen name="Main" component={MainScreen} />
    <Tab.Screen name="Stats" component={StatsScreen} />
    <Tab.Screen name="Profile" component={ProfileScreen} />
  </Tab.Navigator>
);
};

return (
  <NavigationContainer>
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Main" component={MainTabNavigator} />
    </Stack.Navigator> …

在我的导航文件中，当我想切换抽屉时，出现以下错误：

类型错误：navigation.openDrawer 不是函数。（在 'navigation.openDrawer()' 中，'navigation.openDrawer' 未定义）

这是我的抽屉：

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            initialRouteName="MYSHIFT"
        >
            <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} />
        </Drawer.Navigator>
    )
}

这是我的容器导航：

const CareworkerNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>

                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }} />

                <Stack.Screen
                    name="Main"
                    options={({ navigation }) => {
                        return {
                            headerLeft: () => <Button title="LEFT BUTTON" onPress={() => {
                                navigation.toggleDrawer(); // <--- this line throws an error 
                            }} />
                        }
                    }}
                    component={DrawerNavigator} />

            </Stack.Navigator>
        </NavigationContainer>
    )
} …

我试图在 headerRight 按钮单击屏幕上调用函数。我在 useEffect 中将 func 作为参数传递，如下所示。

useEffect(() => {

    navigation.setParams({ _confirmClick: confirmNotification })

  }, [navigation])
    useLayoutEffect(() => {
        navigation.setOptions({
          headerRight: () => (
            <TouchableOpacity
              onPress={() => params._confirmClick('New') }
              style={[theme.marginRight15]}>
              <View style={[styles.sendNotificationButton,
              {
                backgroundColor: notification ? theme.colors.notificationDeleteButtonColor :
                  theme.colors.sendbuttonColor,
                borderColor: notification ? theme.colors.notificationDeleteButtonColor :
                  theme.colors.sendbuttonColor,
              }]}>
                <Ionicons name="ios-send" size={15}
                  style={theme.padding3}
                  color={theme.colors.whiteColor} />
              </View>
            </TouchableOpacity>
          ),
        });
      }, [navigation]);



  function confirmNotification(status) {
...
}

当我点击按钮时，它说：TypeError：无法读取未定义的属性“_confirmClick”