当前位置:主页 > 资料 >

Debugging common React Native issues on iOS
栏目分类:资料   发布日期:2018-08-03   浏览次数:

导读:本文为去找网小编(www.7zhao.net)为您推荐的Debugging common React Native issues on iOS,希望对您有所帮助,谢谢! Software dependency problems Third-party package issues Issues when running on device Expokit issues Pr

本文为去找网小编(www.7zhao.net)为您推荐的Debugging common React Native issues on iOS,希望对您有所帮助,谢谢!

欢迎访问www.7zhao.net



  • Software dependency problems
  • Third-party package issues
  • Issues when running on device
  • Expokit issues

Prerequisites

This article assumes you know how to develop apps with React Native. It also assumes that you have set up your Mac for React Native development. This means you have installed Xcode, , and .

内容来自www.7zhao.net

Optionally, you can check out my article on for some tips on how to deal with issues that are Android-specific.

内容来自www.7zhao.net

Debugging checklist

In this section, we’ll take a look at some of the things you might want to check before really diving into the issue you’re having. Making sure these are taken care of first will save you some time when developing iOS apps with React Native.

内容来自www.7zhao.net

  • Did you check the troubleshooting section of the React Native docs? If you haven’t seen it already, there’s a in the React Native docs. There’s also a separate troubleshooting section for when . Be sure to check those first before going through the rest of the article.
  • Did you update Xcode to the latest version? Most of the time, what causes your build to fail is that you have an outdated version of Xcode. To update Xcode, open the App Store and navigate to the Updates tab. You should see a new entry if a new Xcode version is available. Just hit update and restart your computer once it’s done updating.
  • Have you set up a personal team for Xcode? If you want to test your project on your iOS device, you should first set up a provisioning profile. Here’s a guide that shows you how to do that: .
  • Have you tried deep-cleaning the project? If you’re trying to get a native module to work but it just won’t (after following the installation instructions to the letter). The best next step is to make sure you’re not caching anything that might be breaking your build. You can do that by executing the following commands:

    watchman watch-del-all

    内容来自www.7zhao.net

    rm -rf node_modules 欢迎访问www.7zhao.net

    rm -rf $TMPDIR/react-* www.7zhao.net

    rm -rf $TMPDIR/npm-*

    本文来自去找www.7zhao.net

    rm -rf ios/build www.7zhao.net

Once that’s done, execute npm install again and re-run the project. copyright www.7zhao.net

Software dependency problems

In this section, we’ll take a look at some of the problems you might encounter if you haven’t installed all of the software required by React Native. Or if there are problems with how the software is used. 去找(www.7zhao.net欢迎您

Watchman

Here are a few issues brought about by Watchman.

本文来自去找www.7zhao.net

Application has not been registered

If you see the error “Application {your project name} has not been registered”:

www.7zhao.net

去找(www.7zhao.net欢迎您

This issue is caused by an old bundler instance that is still running. When running different projects, it’s always a good practice to stop running instances of the metro bundler by pressing ctrl + c or ⌘ + c on your keyboard. After that, execute react-native start to re-run the bundler with the correct project.

欢迎访问www.7zhao.net

If you still have the issue after applying the solution above, your problem might be that you’re using a different project name from the one you used when you initialized the project. If you used react-native init TestProject when you created your project, the name you register with AppRegistry should be the same as that:

内容来自www.7zhao.net

import { AppRegistry } from 'react-native';
    import App from './App';

    AppRegistry.registerComponent('TestProject', () => App); 
去找(www.7zhao.net欢迎您

Third-party package issues

In this section, we’ll take a look at some of the problems which you might encounter when installing third-party packages. As a case study, we’ll be looking at how to get React Native Maps working.

copyright www.7zhao.net

No podfile

When starting out with iOS app development with React Native, one of the first things you need to do is setup . CocoaPods is the dependency manager for native iOS projects. React Native taps into this as well so you need to set it up first. You can follow the installation instructions on their .

欢迎访问www.7zhao.net

Once Cocoapods is installed, navigate inside the ios folder of your React Native project and execute the following: www.7zhao.net

pod init 本文来自去找www.7zhao.net 

That should set you up for any React Native package that uses Cocoapods to manage dependencies. Just remember to make the necessary changes to the ios/Podfile and execute pod install whenever you include a new dependency. 欢迎访问www.7zhao.net

Unmet peer dependency

This issue is caused by the third-party modules that you install. For example, specific versions of React Native and React usually go together. Here are the dependencies ( package.json file) in the project that I’m currently working on: 去找(www.7zhao.net欢迎您

"dependencies": {
      "react-native": "0.55.4"
    }, 

内容来自www.7zhao.net

But when you install and you view its package.json , it’s peer dependency doesn’t include React Native version 0.55 : 欢迎访问www.7zhao.net

"peerDependencies": {
      "react-native": "^0.51 || ^0.52 || ^0.53 || ^0.54",
    } 

去找(www.7zhao.net欢迎您

This means you’ll get the following error when installing version 0.21.0 of React Native Maps:

www.7zhao.net

内容来自www.7zhao.net

This is more like a warning that React Native Maps won’t work as expected if your project uses a different version of React Native. So it doesn’t necessarily mean that your project will break if you continue to use this version. You can try running your project first, and if the build succeeds then there’s a good chance that that version actually works.

本文来自去找www.7zhao.net

If you found that the build is breaking, then you can try the following solutions: 去找(www.7zhao.net欢迎您

  • Downgrading the version of React Native for your whole project.
  • Using a lower version of React Native Maps. One that uses the same version of React Native as your project does.

The second option is a better idea if you have a lot of other third-party packages installed on your project. So we’ll go with that.

内容来自www.7zhao.net

Visit the and check the version you want to install. When looking for a version, check the package.json of the version you are installing and make sure its peerDependencies has the same react-native version as your project. After that, navigate to the root directory of your project and install the version you picked: 欢迎访问www.7zhao.net

npm install --save react-native-map@0.21.0 

欢迎访问www.7zhao.net

Once installed, follow the for the version you picked.

内容来自www.7zhao.net

Issues when running on a device

In this section, we’ll take a look at the issues you might encounter when running the app on an iOS device. Before you proceed with this section, I recommend you to check out the in the React Native docs. That shows you how to configure code signing. Code signing is a necessary step when running apps on an iOS device. This ensures that the apps installed on iOS devices are from a known source. If you want to know more about code signing, here’s an article that explains it very well: .

内容来自www.7zhao.net

Back to the issue at hand, you will get an error similar to the following if you haven’t properly set up code signing for your project: copyright www.7zhao.net

copyright www.7zhao.net

If you click on the project navigator on Xcode, click on your project name, then click on the General tab, you can see that there’s no team assigned to the project. 本文来自去找www.7zhao.net

去找(www.7zhao.net欢迎您

Select a team from the drop-down and it should prompt you to try creating a provisioning profile again because it couldn’t create it with the Bundle Identifier that you’ve provided.

欢迎访问www.7zhao.net

copyright www.7zhao.net

More often than not, the bundle identifier generated by React Native is already taken. The solution to this is to come up with a more unique name. This should automatically create the provisioning profile once you move out of the text field for the bundle identifier: 欢迎访问www.7zhao.net

欢迎访问www.7zhao.net

Running the project again on the device should work by now. But if not, then there’s a good chance that the error you’re getting is similar to the following:

copyright www.7zhao.net

www.7zhao.net

To solve this, click on each of the project targets and select the same team that you used earlier:

欢迎访问www.7zhao.net

www.7zhao.net

Once that’s done, your project should run on the device without a hitch. 内容来自www.7zhao.net

ExpoKit issues

In this section, we’ll take a look at some of the issues you might encounter when using . For those unaware, ExpoKit is an Objective-C and Java library that allows you to use within a native Android or iOS project. Not all React Native developers will decide to use Expo or ExpoKit, so this is more like an optional section for those who are using it.

欢迎访问www.7zhao.net

To avoid problems when using ExpoKit, you first have to make sure you have properly set up your project. Open the app.json file and make sure that the name is set to the same name as what you gave your app when you first created it with exp init .

copyright www.7zhao.net

{
      "expo": {
        "name": "yourAppsName",
      }
    } 去找(www.7zhao.net欢迎您 

Next, you have to include the platforms that you want to build for:

内容来自www.7zhao.net

{
      "platforms": [
        "ios",
        "android"
      ]
    } www.7zhao.net 

If you want to build for ios , add a unique bundleIdentifier . This is what Xcode will use when building your app: www.7zhao.net

{
      "ios": {
        "bundleIdentifier": "com.yourname.yourapp"
      }
    } 本文来自去找www.7zhao.net 

If it’s Android, you also have to add the android option with the name of the package :

去找(www.7zhao.net欢迎您

{
      "android": {
        "package": "com.yourname.yourapp"
      }
    } 
欢迎访问www.7zhao.net

After that, the last step is to open the package.json file and make sure that the name is the same as that of the app.json file: 去找(www.7zhao.net欢迎您

{
      "name": "yourAppsName"
    } 
www.7zhao.net

Once those steps are done, your Expo app should be ready for ExpoKit. At this point, you can already execute exp detach from the root of your project directory.

欢迎访问www.7zhao.net

Here’s what it looks like if exp detach worked: 内容来自www.7zhao.net

www.7zhao.net

The next step is to navigate inside the ios directory and execute pod install . ExpoKit uses Cocoapods to manage its dependencies, but detaching to ExpoKit doesn’t automatically install the pods needed for the app to run. That’s why you have to install it manually: 去找(www.7zhao.net欢迎您

去找(www.7zhao.net欢迎您

When developing the app, you want to run the React Native development server first before opening the ios/yourprojectname.xcworkspace file on Xcode. This helps you avoid the following error:

本文来自去找www.7zhao.net

www.7zhao.net

After that, you can already run the app on your device by searching for it on Xcode and hitting the play button. 本文来自去找www.7zhao.net

ExpoKit issues with native packages

Detaching to ExpoKit means we’re still able to use Expo’s APIs. That includes the MapView API which allows us to display a map within the app. This means that we don’t have to install the React Native Maps package. Attempting to do so will only give you an error that looks like the one below: copyright www.7zhao.net

www.7zhao.net

The error above isn’t really very user-friendly, but I only got it after installing React Native Maps and following the installation instructions on their GitHub repo.

去找(www.7zhao.net欢迎您

ExpoKit already uses the React Native Maps package behind the scenes so installing it again will only cause errors. This is because you’re essentially duplicating the libraries linked to the iOS project.

欢迎访问www.7zhao.net

If you’ve already installed React Native Maps, you can uninstall it by executing the following command from the root of your project directory:

内容来自www.7zhao.net

npm uninstall react-native-maps --save 本文来自去找www.7zhao.net 

After that, remove all the entries pertaining to React Native maps on your ios/Podfile . In my case, I had to remove the following lines:

去找(www.7zhao.net欢迎您

rn_path = '../node_modules/react-native'
    rn_maps_path = '../node_modules/react-native-maps'

    pod 'react-native-maps', path: rn_maps_path
    pod 'react-native-google-maps', path: rn_maps_path

    pod 'GoogleMaps'  # Remove this line if you don't want to support GoogleMaps on iOS
    pod 'Google-Maps-iOS-Utils'

    installer.pods_project.targets.each do |target|
      if target.name == 'react-native-google-maps'
        target.build_configurations.each do |config|
          config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
        end
      end
      if target.name == "React"
        target.remove_from_project
      end
    end 欢迎访问www.7zhao.net 

Once you’ve removed those lines, save the file and execute pod update inside the ios directory of your project. 欢迎访问www.7zhao.net

Once that’s done, you should now be able to start the development server and run the app:

本文来自去找www.7zhao.net

react-native start
    react-native run-ios # only for running on the iOS simulator 
内容来自www.7zhao.net

Note that when running on a device, you should open the ios/yourproject.xcworkspace file in Xcode instead of executing react-native run-ios in your terminal.

去找(www.7zhao.net欢迎您

You can choose which simulated device you want to run on by specifying the --simulator option:

本文来自去找www.7zhao.net

react-native run-ios --simulator "iPhone 5s" 
欢迎访问www.7zhao.net

You can see a list of available devices by executing the following command: 欢迎访问www.7zhao.net

xcrun simctl list devices 
copyright www.7zhao.net

This returns an output similar to the following:

copyright www.7zhao.net

copyright www.7zhao.net

Conclusion

That’s it! In this article, you’ve learned how to deal with some of the most common issues that you might encounter when first starting out developing React Native apps to be deployed for iOS. copyright www.7zhao.net

去找(www.7zhao.net欢迎您


本文原文地址:https://blog.pusher.com/debugging-react-native-ios/

以上为Debugging common React Native issues on iOS文章的全部内容,若您也有好的文章,欢迎与我们分享! 本文来自去找www.7zhao.net

Copyright ©2008-2017去找网版权所有   皖ICP备12002049号-2 皖公网安备 34088102000435号   关于我们|联系我们| 免责声明|友情链接|网站地图|手机版