Question

我运行了调试器，axios在发送请求时失败了。同样的事情在Android中完美运行。一旦它通过axios发送请求，那么这些红色屏幕就会在模拟器上弹出：

这是给出错误的代码：

 /*red screen here after request send*/return axios.get(config.backend_url + '/api/firebase-user/' + firebaseId)
          .then((userDataFetchResult) => {
            dispatch(setUserGeneralData(userDataFetchResult.data.data));
            dispatch(authOperationFinished());
            return userData;
          })
          .catch(err => {
            console.log(err);
            dispatch(authOperationFailed(err));

          });

我的package.json：

 "dependencies": {
    "axios": "^0.18.0",
    "lodash": "^4.17.5",
    "native-base": "^2.4.1",
    "react": "16.3.1",
    "react-native": "0.54.1",
    "react-native-app-intro-slider": "^0.2.4",
    "react-native-datepicker": "^1.7.1",
    "react-native-fbsdk": "^0.7.0",
    "react-native-firebase": "^4.0.0",
    "react-native-image-picker": "^0.26.7",
    "react-native-navigation": "^1.1.444",
    "react-native-twitter-signin": "^1.0.2",
    "react-native-vector-icons": "^4.6.0",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }

我的信息.plist：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>fbXXXXXXX</string>
            </array>
        </dict>
    </array>
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>fbapi</string>
        <string>fb-messenger-share-api</string>
        <string>fbauth2</string>
        <string>fbshareextension</string>
    </array>
    <key>NSCameraUsageDescription</key>
    <string>Camera Permissions</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Gallery Permissions</string>
    <key>UIAppFonts</key>
    <array>
        <string>Ionicons.ttf</string>
    </array>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>FFFF</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>UILaunchStoryboardName</key>
    <string>LaunchScreen</string>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
        <string>UIInterfaceOrientationLandscapeLeft</string>
        <string>UIInterfaceOrientationLandscapeRight</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string></string>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    <key>FacebookAppID</key>
    <string>XXXXXX</string>
    <key>FacebookDisplayName</key>
    <string>FF</string>
</dict>
</plist>

我的AppDelegate.m：

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>

// **********************************************
// *** DON'T MISS: THE NEXT LINE IS IMPORTANT ***
// **********************************************
#import <TwitterKit/TwitterKit.h>

// IMPORTANT: if you're getting an Xcode error that RCCManager.h isn't found, you've probably ran "npm install"
// with npm ver 2. You'll need to "npm install" with npm 3 (see https://github.com/wix/react-native-navigation/issues/1)

#import <Firebase.h>
#import "RCCManager.h"

#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

  [[FBSDKApplicationDelegate sharedInstance] application:application
                           didFinishLaunchingWithOptions:launchOptions];


  NSURL *jsCodeLocation;
#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.backgroundColor = [UIColor whiteColor];
  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation launchOptions:launchOptions];

  return YES;
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<NSString *,id> *)options {

  BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                openURL:url
                                                      sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                             annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
                  ];

  BOOL handledT = [[Twitter sharedInstance] application:application openURL:url options:options];
  // Add any custom logic here.
  return handled || handledT;
}


- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

@end

知道可能出现什么问题？非常感谢你！

编辑：很明显，请求数据到了，但无论如何它都会抛出红色屏幕。在抛出错误之前，调用它的组件的render方法也会运行几次。我在componentDidMount上调用它。渲染方法

render() { let content = ( <CausesList causes={this.props.causes} onItemSelected={this.itemSelectedHandler} onLoadMore={this.onLoadMoreHandler} /> ); let spinner = null; if (this.props.causesFetchLoading || this.state.checkingFirebaseAuth) { spinner = <ActivityIndicator /> } return ( <View> <SearchBar onSearch={this.onShearchHandler} /> <CauseCategoriesList causeCategories={this.props.causeCategories} onCategoryPressed={this.onCategoryPressedHandler} /> {content} {spinner} </View> ); } }

编辑2：似乎与网络无关。我一直在用调试器跟踪程序，它在渲染组件时失败了。它必须做一些在android中接受但不在ios中的转换....

Answer 1

我通过对调试器进行大量挖掘解决了这个问题，因为错误信息真的很神秘而且没有任何帮助，遗憾的是它没有显示更具体的内容。最后，它与网络无关。数据到达但是在渲染失败的那一刻。我开始一次删除一个组件，看看问题可能是什么，直到问题指向具有图像组件的卡组件。问题是，如果您使用null值设置本地反应的图像源，Android将接受它没有问题。但是，如果你在ios中这样做，那么它将抛出你在上面看到的错误（红色屏幕）。解决方案是在路径不为空时有条件地渲染图像。我留下一个例子，说明我如何解决它以供将来参考：

if(props.cause.pic_url){
    image = (<Image source={{uri: props.cause.pic_url}} style={{height: 200, width: 200, flex: 1}}/>)

  }

  return (<TouchableOpacity onPress={props.onItemPressed}>
    <Card style={{flex: 0}}>
            <CardItem>
              <Left>
                  { thumbnail }
                <Body>
                <Text>{props.cause.name}</Text>
                <Text>{props.cause.hashtag}</Text>                  
                </Body>
              </Left>
            </CardItem>
            <CardItem>
              <Body>
                   { image }
                <Text>
                  {props.cause.short_description}
                </Text>
              </Body>
            </CardItem>
            <CardItem>
              <Left>
                <Button transparent textStyle={{color: '#87838B'}}>
                  <Icon name="logo-github" />
                  <Text>1,926 stars</Text>
                </Button>
              </Left>
            </CardItem>
          </Card>

  </TouchableOpacity>)

React-native：Axios不在ios上工作但在android上工作。错误：NSNull类型的JSON值“<null>”无法转换为NSString

1 个答案: