有哪些場景是需要混合開發(fā)呢辰妙？

1. react-native 原生android的UI的支持
2. react-native 的一些交互邏輯需要java處理(比如APP跳轉微信小程序)

根據(jù) 單一職責的原則 ，文章分為三篇，此篇為react-native 與 java 混合開發(fā) 2/3 使用原生UI

關鍵
關鍵是js與java的通信

友情提示：react-native 與 java 混合開發(fā) 1/3 框架搭建 是基礎，請確定你的框架搭建

步驟
我們拿react-native-linear-gradient 組件舉例
1.我們從 npm 倉庫中下載react-native-linear-gradient

npm i react-native-linear-gradient --save
react-native link

2.在MainActivity下添加 addPackage(new LinearGradientPackage()),如下

@Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context = this;
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new LinearGradientPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

以上就可以在js端使用了
分析
在react-native-linear-gradient中有三個類
分別是：
LinearGradientView 繼承 View 類

LinearGradientManager 繼承 SimpleViewManager<LinearGradientView> 類

LinearGradientPackage 實現(xiàn) ReactPackage 接口

他們的關系是:
LinearGradientManager 管理 LinearGradientView

LinearGradientPackage 管理 LinearGradientManager

LinearGradientPackage 拋出引用給 ReactInstanceManager

值得注意的是:
在LinearGradientPakcage中有兩個方法:
createNativeModules,
createViewManagers,
對于原生UI,需要在createViewManagers中將ViewManager實例返回，如:

public class LinearGradientPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
            new LinearGradientManager());
    }
}