标签: react-navigation

我在 React Native 应用程序中使用 React-navigation v2 创建了一些选项卡。我创建了 componentDidMount 函数，其中调用 willFocus。第一次运行应用程序并且第一次选择我想要的选项卡时，willFocus 不会执行。但是，当我转到不同的选项卡并返回该选项卡时，现在 willFocus 会执行。willFocus第一次不执行而第二次运行正常的原因是什么？

所需的选项卡 componentDidMount 函数

componentDidMount(){
    const {navigation} = this.props;
    navigation.addListener ('willFocus', async () =>{
      console.log("willFocus runs"
    });
}

选项卡导航器与其他导航器嵌套，但我只显示下面的选项卡导航器

TabNav: createBottomTabNavigator(
        {
            TAB1: Screen1,
            TAB2: Screen2,
            TAB3: Screen3,
            TAB4: Screen4,
            TAB5: Screen5,
            // Map: MapScreen
        },
        {
            initialRouteName: 'Bar',
            transitionConfig: NavigationConfig,
            navigationOptions: ({navigation})=>({
                tabBarIcon: ({focused, tintColor})=>{
                    const { routeName } = navigation.state;
                    let iconName, iconSize;
                    switch(routeName) {
                                case "TAB1":
                                    iconName = `icon1`;
                                    break;
                                case "TAB2":
                                    iconName = `icon2`; …

我正在使用 React navigation V3，我想在我的 BottomTabNavigator 中使用滑动。我不能这样做，因为 createBottomTabNavigator 还不支持它，并且 createBottomNavigator 实际上已被弃用。这很烦人，因为在 React navigation V2 中我们可以很容易地做到这一点。只是 createMaterialTopTabNavigator 支持滑动，但我想要一个底部导航器而不是顶部导航器

状态在 useCallBack 挂钩内变得未定义我认为它没有获得状态变量的范围

const [selectedLocation, setSelectedLocation] = useState()
const selectLocationHandler = (event) => {
    setSelectedLocation({
        lat: event.nativeEvent.coordinate.latitude,
        lng: event.nativeEvent.coordinate.longitude
    })
    console.log('set location', selectedLocation)
}

const saveLocationPickerHandler = useCallback(() => {
    console.log('saveLocation', selectedLocation)
    if (!selectedLocation) {
        return;
    }
    props.navigation.navigate('DeliveryLocation', { pickedLocation: selectedLocation })
}, [])

设置位置我正在获取对象 { "lat": 37.775030512686214, "lng": -122.4273883345241, }

其中 savelocation 在控制台中未定义

我正在开发一个应用程序，它有一个类别屏幕，其中显示该类别的相关帖子。我正在使用反应导航在屏幕之间导航并处理深层链接。类别屏幕可以在应用程序内或通过深层链接访问。要通过深层链接访问类别屏幕，我正在使用类似myapp://category/:id.

如果应用程序已打开并且专注于类别屏幕，则深层链接不会执行任何操作。

我目前已经使用componentDidUpdate生命周期方法“修复”了它，以比较存储在状态中的 ID 和navigation.getParam.

componentDidUpdate = () => {
  const { navigation } = this.props;
  const { categoryID } = this.state;
  const paramID = navigation.getParam('id', null);

  if (paramID !== categoryID) {
    this.setState({ categoryID: paramID }, () => {
      // fetch data
    });
  }
}

然而，这对我来说似乎是一个肮脏的修复。有更好的方法吗？也许使用推送打开所有深层链接而不是通过反应导航进行导航？

我刚刚更新以响应本机导航版本 5。现在我尝试在 goBack() 调用上将数据发送回上一个屏幕。

我推动下一个视图

const onSelectCountry = item => {
    console.log(item);
};

navigation.navigate('SelectionScreen', {
        onSelect: onSelectCountry});

并在通过调用从 FlatList 选择项目后返回：

function onSelectedItem(item) {
    route.params.onSelect(item);
    navigation.goBack();
}

但是通过使用参数发送函数，我收到警告：在导航状态中发现不可序列化的值...

有人可以告诉我正确的方法吗？

因此，我刚刚将ignite-bowser项目升级到他们的5.0 模板，其中包括 React Navigation 5，这需要从使用SwitchNavigator在“Auth”和“App”StackNavigators 之间交换的传统推荐方法更改为新的声明式身份验证流程方法使 SwitchNavigator 变得冗余。

仅供参考，Ignite Bowser 项目本质上是 React Native 模板应用程序，由

React Native
React Navigation
MobX State Tree
TypeScript
Reactotron
And more!

true因此，这一切看起来都很简单，但是当使用存储在应用程序商店之一中的布尔值并设置为在身份验证方法中调用的操作中时，我无法让实际的导航器进行切换。

根据服务器日志和 Reactotron 源，身份验证工作正常。之后重新加载应用程序确实会呈现应用程序导航器，但会话实际上并不有效，因为内存已被清除。所有后续请求都会失败，但应用程序不会切换到身份验证导航器。

以下是相关代码片段：

根导航器.tsx

const RootStack = () => {
  const { pbidStore } = useStores()

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        stackPresentation: "modal",
      }}
    >
      {pbidStore.isAuthenticated ? (
        <Stack.Screen
          name="pbidStack"
          component={PbidNavigator}
          options={{
            headerShown: false,
          }}
        />
      ) : (
        <Stack.Screen
          name="authStack"
          component={AuthNavigator} …

从昨天开始我就一直被这个问题困扰，找不到解决办法。

我一直在尝试调整 iPhone X 中 safeArea 的颜色，对于没有选项卡的屏幕，它在顶部和底部运行良好，但是，在带有选项卡导航器的屏幕中，底部 safeArea 始终为白色，如图所示屏幕截图。有谁知道如何解决这个问题？

另外，我想问使用普通的 SafeAreaView 组件并删除 SafeAreaProvider 并删除 react-native-safe-area-context 包是否会更好，我只是将其添加为解决此问题的试用版，但我首先使用React Native 普通 SafeAreaView 组件；

在应用程序组件中：

import { SafeAreaProvider } from "react-native-safe-area-context";
          <SafeAreaProvider>
            <NavigationContainer>
              <CatNavigator />
            </NavigationContainer>
          </SafeAreaProvider>

在 CatNavigator 组件中：

const CatNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="Home"    >
      <Drawer.Screen
        name="Home"
        component={SettingsNavigator}
        options={{ title: "Inicio" }}
      />
    </Drawer.Navigator>

在设置选项卡导航器中：

const SettingsNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let …

我使用 React Navigation 的useNavigation钩子：

在 MyComponent.js 中：

import { useNavigation } from "@react-navigation/native";

const MyComponent = () => {
    const navigation = useNavigation();
    const handleNav = () => {
        navigation.navigate("about");
    };
    return(
        <TouchableOpacity onPress={handleNav}>
            <Text>About</Text>
        </TouchableOpacity>
    )
}

有没有办法将此功能移至自定义挂钩？我尝试了以下方法：

在useCustomNav.js中：

import { useNavigation } from "@react-navigation/native";

const useCustomNav = ({ to }) => {
  const navigation = useNavigation();
  navigation.navigate(to);
  return null;
};

export default useCustomNav;

在 MyComponent.js 中：

import useCustomNav from './useCustomNav';

const MyComponent = () => { …

我有 3 个选项卡，每个选项卡都包含一组堆栈导航器。

1. 家庭堆栈

    const HomeNavigator = createStackNavigator();

    const HomeStackNavigator = ({navigation, route}) => {
      return (
        <HomeNavigator.Navigator>
          <HomeNavigator.Screen
            name="Home"
            component={Home}
          />
          <HomeNavigator.Screen
            name="Profile"
            component={Profile}
          />
          <HomeNavigator.Screen
            name="Settings"
            component={Settings}
          />
        </HomeNavigator.Navigator>
      );
    };

2. 存储堆栈

    const StoreNavigator = createStackNavigator();

    const StoreStackNavigator = ({navigation, route}) => {
      return (
        <StoreNavigator.Navigator>
          <StoreNavigator.Screen
            name="OurStore"
            component={Store}
          />
        </StoreNavigator.Navigator>
      );
    };

3. 社区堆栈

    const CommunityNavigator = createStackNavigator();

    const CommunityStackNavigator = ({navigation, route}) => {
      return (
        <CommunityNavigator.Navigator>
          <CommunityNavigator.Screen
            name="Community"
            component={Community}
          />
          <CommunityNavigator.Screen
            name="CommunityReply"
            component={CommunityReply}
            options={communityReplyOptions}
          />
          <CommunityNavigator.Screen …

我对测试 React 和 React Native 应用程序的知识非常有限。所以我刚刚开始在我的 React Native 应用程序中设置一些测试。我正在使用 expo，所以我安装了 jest、jest expo、react-test-renderer。我想检查一个非常简单的测试，我认为这可能不是一个简单的测试，可能是因为导航，但无论如何我无法克服下面的这个错误。我正在发布我的应用程序代码、测试和我看到的错误。

在 package.json 中

  "jest": {
    "preset": "jest-expo",
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|@sentry/.*)"
    ],

应用组件

 import React from 'react';     
 import { createAppContainer } from 'react-navigation';
 import { createStackNavigator } from 'react-navigation-stack';
 import MemberHomeScreen from './src/screens/MemberHomeScreen';
 import SignUpScreen from './src/screens/SignUpScreen';
 import { setNavigator } from './src/navigationRef';
 import SignInScreen from './src/screens/SignInScreen';
 import HomeScreen from './src/screens/HomeScreen';
 import MemberDetailsScreen from './src/screens/MemberDetailsScreen';
        
        const appNavigator = createStackNavigator(
          {
            Home: HomeScreen, 
            MemberHome: MemberHomeScreen,
            SignUp: SignUpScreen,
            SignIn: SignInScreen,
            MemberDetails: …