导航到另一个屏幕时，应用程序在 IOS 上冻结 - React Navigation

Posted 2023-03-15

【中文标题】导航到另一个屏幕时，应用程序在 IOS 上冻结 - React Navigation

【英文标题】：App freezes on IOS when navigate to another screen - React Navigation

【发布时间】：2019-06-25 11:00:15

【问题描述】：

当前行为 当我想从 Page1 导航到 Page2 时，ios 应用程序冻结

预期行为 我有两个简单的页面，我想从 Page1 转到 Page2 就像

<Button title = "Go to Page2" onPress=() => this.props.navigation.navigate("Page2") />

但在 IOS 模拟器上，当我按下 Button 或 TouchableOpacity 时，应用程序冻结并且无法转到另一个屏幕。实际上第 2 页正在后台加载，但屏幕无法自行更新。

Page1.js

import React, Component from 'react';
import View, Text, Button from 'react-native';

export default class Page1 extends Component
    render() 
        return(
            <View>
                <Text>Page 1</Text>
                <Button title = "Go to page 2" onPress=() => this.props.navigation.navigate("Page2") />
            </View>
        )
    

Page2.js

import React, Component from 'react';
import View, Text from 'react-native';

export default class Page2 extends Component
    componentDidMount() 
        console.log("This is page 2 and, I can see this from console.");
    
    render() 
        return(
            <View>
                <Text>I'm in Page 2</Text>
            </View>
        )
    

Router.js

import React from 'react';
import  createStackNavigator, createAppContainer  from "react-navigation";
import Page1 from "./Page1";
import Page2 from "./Page2";

const AppNavigator = createStackNavigator(
        Page1: 
            screen: Page1
        ,
        Page2: 
            screen: Page2
        
    , 
        initialRouteName: "Page1",
    
);
export default createAppContainer(AppNavigator);

package.json

"dependencies": 
    "@react-native-community/async-storage": "^1.5.0",
    "react": "16.8.3",
    "react-native": "0.59.8",
    "react-native-elements": "^1.1.0",
    "react-native-facebook-account-kit": "^1.1.0",
    "react-native-fbsdk": "^0.8.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-iap": "^2.5.5",
    "react-native-vector-icons": "^6.5.0",
    "react-navigation": "^3.11.0"
  

Podfile

pod 'React', :path => '../node_modules/react-native', subspecs: [
       'Core',
       'CxxBridge',
       'DevSupport',
       'RCTText',
       'RCTNetwork',
       'RCTWebSocket',
       'RCTAnimation',
       'RCTActionSheet',
       'RCTBlob',
       'RCTCameraRoll',
       'RCTGeolocation',
       'RCTImage',
       'RCTPushNotification',
       'RCTSettings',
       'RCTTest',
       'RCTVibration',
       'RCTLinkingIOS'
     ]
     pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
     pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
     pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
     pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
     pod 'RNAccountKit', :path => '../node_modules/react-native-facebook-account-kit/ios'
     pod 'RNIap', :path => '../node_modules/react-native-iap'
     pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage'
     pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
     pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

环境

React Native Environment Info:
System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 209.52 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.1 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
android SDK:
API Levels: 24, 26, 27, 28, 29
Build Tools: 19.1.0, 20.0.0, 21.1.2, 22.0.1, 23.0.2, 25.0.0, 26.0.2, 27.0.0, 28.0.3, 29.0.0, 29.0.0
System Images: android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom_64
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5522156
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.8 => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-rename: 2.4.1

【问题讨论】：

对我来说一切正常。您是否尝试过将 Page2 设置为您的初始屏幕并查看它是否正确加载？

是的，我试过了。在 Android 上，一切看起来都不错。我认为 IOS 包或 IOS 上的 react-navigation 会导致此问题。你试过我的依赖吗？

这段代码一定会给你一个错误。因为createStackNavigator、createAppContainer 没有导入到你的Router.js 文件中。您还从“./Page1”导入了 Page2。

@firats 我在此处添加了这两行。应用程序正常工作，直到我按下按钮。 Android 平台也运行良好。

@hakiko 我明白了。但你仍然有import Page2 from "./Page1";。这是真的 Page2 来自与 Page1 相同的路径吗？

【参考方案1】：

我遇到了同样的问题，我花了将近 1 周的时间来解决它。您的 pod 文件是问题所在。

在子规范中

'核心', 'RCTLinkingIOS'

你只需要这两个。更改您的 pod 文件，然后执行 pod install。如果您遇到任何错误，请添加缺少的子规范并执行pod install。罪魁祸首是子规范中的一项。

【讨论】：

你是对的。我也度过了我的三天。然后我在没有 Pod 文件的情况下手动安装了我的包。那么哪个子规范导致了这个错误？你找到了吗？

不完全是。我从中删除了所有不需要的 podsec。我只使用'Core'、'RCTLinkingIOS'和RCTImage

【参考方案2】：

我遇到了类似的问题，@CRYadu 的回答有所帮助。我最终清除了我的依赖项，然后从头开始重新安装解决了这个问题。

rm -rf node_modules && rm -rf package-lock.json
npm install
npm run pods
npm start
npm run ios