在通过react-native init 新生成项时，有时候会挂起，无法成功，这时候很可能是watchman导致的，运行下面的命令重新安装watchman可以解决问题

rm -rf /usr/local/var/run/watchman/ && brew uninstall watchman && brew install watchman

问题描述

在 app开发过程中，添加了新的图片之后，有时会出现如下错误：

Unexpected character '�' (1:0)

具体issue可参见这里

原因分析

可能的原因是 npm start的时候React Native会生成一份图片的map，新加入的图片导致map出现问题。

解决方案

重启packager：

npm start

问题描述

React Native app 启动后，在显示app landing view前会显示一段时间的白屏，随着app内容增加，白屏时间也会增加，非常影响用户体验。

原因分析

React Native app打包后，所有的js文件会打包到js.bundle文件中，app启动时会load该文件到内存，然后显示第一个界面，如果js.bundle文件很大， load需要比较长的时间，在这段时间内就会出现白屏。

解决方法

iOS

对于iOS, 解决方法是在load js.bundle的这段时间内显示一个loadingView, 幸运的是RCTRootView已经提供了技术支持，具体方法是在 AppDelegate.m的application:didFinishLaunchingWithOptions: 方法内添加如下代码，在load js.bundle 的时候显示LaunchScreen

UIView* launchScreen = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];
launchScreen.frame = [UIScreen mainScreen].bounds;
rootView.loadingView = launchScreen;
return YES;

Android

对于 Android，一个简单的解决方法是添加一个SplashScreen，方法如下：

1. 添加一个名为 splash_screen.xml 的 drawable作为SplashScreen：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/background"/>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/logo"/>
    </item>
</layer-list>

2. 在 styles.xml 中添加一个名为SplashTheme的Theme：

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    </style>
    <style name="SplashTheme" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>
</resources>

3. 修改AndroidManifest.xml中application的android:theme的值新添加的theme：

<application
      android:theme="@style/SplashTheme">
</application>

结论

该解决方案简单易用，虽然没有提高app的启动速度，但很好的解决了白屏问题，提高了app用户体验。