Question

当前行为 当我想从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

Answer 1

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

在子规格中

“核心”， “ RCTLinkingIOS”

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

Answer 2

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

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

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

2 个答案: