RN实战经验总结

---

title: RN实战经验总结

前言

在草稿箱中发现了许久之前写的这篇文章，虽然不搞RN已经大半年了，但是之前写过的东西还是还出来作个纪念。如果能帮到别人那再好不过了。

Android中集成RN

这个需要说的都在这里说了，见在原有Android项目中快速集成React Native

关于RN在项目中Android端的预加载

此前曾根据网上的做法并结合最新的RN源码做了一个RN的预加载库，不过在后来发现会出现内存泄漏问题。在集成到项目Android端此着手解决了这一问题。
然而在实际的开发中，几乎有大半的页面是用RN开发，如果全部页面都使用预加载，那么对内存会有很大的压力，而且也没有这个必要。
首先说一下目前项目的页面组织结构，其实就是目前主流的主Activity（带四个Fragment）+其他Activity，主Activity在应用运行期间是一直存在的，这就为预加载提供了一个绝佳的基础。
最终使用预加载的是主Activity【我的】Fragment页面。在RN中加载Fragment并不难，在Android中加载RN，无论是在Activity还是Fragment，加载的都只是一个View而已。而给Fragment设置View，只需要Fragment的onCreateView返回RN的View即可。
具体见：在Android中预加载React Native jsBundle

优化非预加载初始化属性传递

在原本的ReactActivity中传递启动属性可以用以下方式

public class C3RNActivity extends ReactActivity {
    public static final String MAIN_COMPONENT_NAME = C3RNActivity.class.getSimpleName();

    protected @Nullable
    String getMainComponentName() {
        return MAIN_COMPONENT_NAME;
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Nullable
            @Override
            protected Bundle getLaunchOptions() {
                Bundle bundle=new Bundle();
                //往bundle中添加启动属性键值对
                bundle.putString("key","value");
                return bundle;
            }
        };
    }
}

这种方式传递是完全没问题的，但是有点局限性。查看ReactActivity的源码，createReactActivityDelegate是在ReactActivity的构造方法调用（在OnCreate之前）。但这样一来就无法在OnCreate通过getItent获取别的Activity传递过来的参数，因此我们需要对原本的ReactActivity进行改造。将createReactActivityDelegate方法调用从ReactActivity移到onCreate方法中，但是在ReactActivityDelegate的onCreate方法之前。这样我们需要重写ReactActivity而不是直接通过继承创建满足我们要求的ReactActivity。

public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler, PermissionAwareActivity {

    private MyReactActivityDelegate mDelegate;

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     * e.g. "MoviesApp"
     */
    protected @Nullable
    String getMainComponentName() {
        return null;
    }

    /**
     * Called at construction time, override if you have a custom delegate implementation.
     */
    protected MyReactActivityDelegate createReactActivityDelegate(final Intent intent) {
        return new MyReactActivityDelegate(this, getMainComponentName()){
            @Nullable
            @Override
            protected Bundle getLaunchOptions() {
                Bundle bundle=new Bundle();
                //在这里将intent参数放入bundle，作为RN的页面启动参数
                //例如：
                bundle.putString("key",intent.getStringExtra("xxx"));
                return bundle;
            }
        };
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent=getIntent();
        mDelegate = createReactActivityDelegate(intent);
        mDelegate.onCreate(savedInstanceState);
    }

    @Override
    protected void onPause() {
        super.onPause();
        mDelegate.onPause();
    }

    @Override
    protected void onResume() {
        super.onResume();
        mDelegate.onResume();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mDelegate.onDestroy();
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        mDelegate.onActivityResult(requestCode, resultCode, data);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        return mDelegate.onKeyUp(keyCode, event) || super.onKeyUp(keyCode, event);
    }

    @Override
    public void onBackPressed() {
        if (!mDelegate.onBackPressed()) {
            super.onBackPressed();
        }
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }

    @Override
    public void onNewIntent(Intent intent) {
        if (!mDelegate.onNewIntent(intent)) {
            super.onNewIntent(intent);
        }
    }

    @Override
    public void requestPermissions(
            String[] permissions,
            int requestCode,
            PermissionListener listener) {
        mDelegate.requestPermissions(permissions, requestCode, listener);
    }

    @Override
    public void onRequestPermissionsResult(
            int requestCode,
            String[] permissions,
            int[] grantResults) {
        mDelegate.onRequestPermissionsResult(requestCode, permissions, grantResults);
    }

    protected final ReactNativeHost getReactNativeHost() {
        return mDelegate.getReactNativeHost();
    }

    protected final ReactInstanceManager getReactInstanceManager() {
        return mDelegate.getReactInstanceManager();
    }

}

其中，MyReactActivityDelegate 是直接继承ReactActivityDelegate，因为在ReactActivityDelegate中，onCreate，onPause，onDestroy等方法是protect修饰，无法在其他包中引用，所以需要对其复写，实现中只需要调用父类方法即可。

多入口

在本次项目中使用的是多注册方式实现RN的多入口，实际上通过启动属性传递需要打开的RN页面参数也是可以的。不过因为使用多注册实现多入口还是踩了一些坑。在多注册方式下，RN的全局变量在iOS客户端是无效的。也就是说，在一个根组件中给一个全局变量赋值，在另外一个根组件中读取到的全局变量值是空的。而在Android端是没有这个问题。

网络图片加载过渡

这里不得不提这是RN的一个坑，最新的RN都发布到0.5x了，在Android中依然没有支持默认占位图，默认加载错误图，以及加载进度方法。这三个都只有在iOS端有效，在Android端则需要自己手动实现。

网络状况判断

这里不得不提这又是RN的一个坑。在RN中官网推荐判断网络是否可用的方法如下：
NetInfo.isConnected.fetch().done(
(isConnected) => { this.setState({isConnected}); }
);
然而实际上在iOS端，isConnected返回的永远是false。

官方文档说上面这个方法是Android和iOS平台通用的，然而你实际使用的时候在iOS端就会发现问题，即使到了0.51，这个问题仍然存在.....
其实这个解决办法很多，
具体可见：Github issue：iOS: NetInfo.isConnected returns always false
其中一种解决办法如下：

function handleFirstConnectivityChange(isConnected) {
    if (!sConnected) {
     // do action
    } 
    NetInfo.isConnected.removeEventListener('change', handleFirstConnectivityChange);
}

if (Platform.OS === 'ios') {
    NetInfo.isConnected.addEventListener('change', handleFirstConnectivityChange); 
} else {
    NetInfo.isConnected.fetch().then(isConnected => {
    if (!sConnected) {
        // do action
    } 
}

Linking模块在Android release模式下getInitialURL返回为null

这也是一个大坑。在RN中，如果你的应用被其注册过的外部url调起，则可以在任何组件内这样获取和处理它：

componentDidMount() {
Linking.getInitialURL().then((url) => {
if (url) {
console.log('Initial url is: ' + url);
}
}).catch(err => console.error('An error occurred', err));
}
然而在Android端打成Release包时，返回的url偶尔会为空，对，是偶尔，并且概率还比较大，原因暂时未知。所以要通过外部链接和Linking模块来打开RN的话，这种做法是不靠谱的。解决办法是用Android原生的老办法，在Activity的onCreate方法中获取外部链接以及相关参数，并作为启动参数传递给RN。为此，需要重写ReactActivity和ReactActivityDelegate。具体参考：优化非预加载初始化属性传递一节。

总结：

从17年4月份开始接触RN，至今如有大半年时间，在这大半年时间里，从入门学习到实际动手写出一个完整的仿实际产品的App出来花了一个月时间，与当初学习Android相比这个时间短得太多了。到17年6月份在我们公司的天翼云iOS客户端其中一个页面试点使用RN，然后前后花了一个月时间，但实际动手接入项目中与从零开始一个RN项目有很大的不同，期间踩了好几个坑，还好都能及时解决。到17年10月份，在我们公司的产品两个客户端都接入RN并且是重度使用，大概有50%~60%页面是使用RN开发。在这一次接近2个月的开发过程中，对RN简直又爱又恨，踩了大大小小好多个坑，看到了RN的许多不足，也看到了原生与RN无法比拟的一些优势。
先来说一下切身体会的优势：

• 上手快，即使不懂JS，入门也不用太长时间，半个月时间其实就足够了。上手之后，开发效率其实可以很高。
• 跨平台，这是一个巨大的优势，虽然RN的代码不能做到100%两个端复用，但是90%还是没问题的。而自然地，可以节省一定的人力成本。
• 热更新，这一功能在Android中实现比较简单，但是因为苹果爸爸禁用了JSPatch，因此在iOS端能用的热更新方法不多了，而热更新则是其中一个。
• 更新快，这其实是一个优点也可以说是缺点，说它是优点因为勤快地更新则说明RN加了某些新特性或者修复了一些历史遗留的bug，说它是缺点则是因为更新太快，说不定某些API哪天突然就不能用了，代码的写法又不一样了，RN版本升级的时候也是一件比较痛苦的事情。
• 调试方便：可以在谷歌浏览器上面单步调试JS代码，双击R（或摇一摇或CMD+R）就能快速reload代码

不足：

• 开发过程会时不时就踩到坑，RN作为一个还没正式发布1.0版本的框架，有一些bug是必然的。
• 列表控件性能仍不能满足要求，在快速滑动时会看到一些空白项。
• 图片缓存：官方没有很好的支持，第三方库也没有找到比较满意的方案。
• 动画效果不佳：这个众所周知，动画效果需要自己做优化。