React Native十五：原生UI组件_react-native的ui是原生的

作者：很楠不爱3 | 2024-02-23 06:14:36

踩

react-native的ui是原生的

在如今的App中，已经有成千上万的原生UI组件了——其中的一些是平台的一部分，另一些可能来自于一些第三方库，而且可能你自己还收藏了很多。React Native已经封装了大部分最常见的组件，譬如ScrollView和TextInput，但不可能封装全部组件。而且，说不定你曾经为自己以前的App还封装过一些组件，React Native肯定没法包含它们。幸运的是，在React Naitve应用程序中封装和植入已有的组件非常简单。

本向导会引导你如何构建一个原生UI组件，带领你了解React Native核心库中WebView组件的具体实现。

一、WebView样例

在这个例子里，我们来看看为了让JavaScript中可以使用WevView，我们以react-native init AwesomeProject创建示例项目进行演示，项目完成目录如下：

提供原生视图很简单，主要有如下几个步骤：

1.创建一个ViewManager的子类，实现createViewInstance方法，使用@ReactProp（或@ReactPropGroup）注解；

2.创建一个把ReactPackage的子类，把这个视图管理类注册到应用程序包的createViewManagers里；

3.在MainActivity中的getPackages方法中添加ReactPackage的子类；

4.实现JavaScript模块WebView.js，index.android.js；

ReactWebViewManager.java类：


public class ReactWebViewManager extends SimpleViewManager<WebView>{
    public static final String REACT_CLASS = "MyWebView";
 
    @Override
    public String getName() {
        return REACT_CLASS;
    }
 
    @Override
    protected WebView createViewInstance(ThemedReactContext reactContext) {
        WebView webView= new WebView(reactContext);
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });
        return webView;
    }
 
 
    @ReactProp(name = "url")
    public void setUrl(WebView view,@Nullable String url) {
        Log.e("TAG", "setUrl");
        view.loadUrl(url);
    }
    @ReactProp(name = "html")
    public void setHtml(WebView view,@Nullable String html) {
        Log.e("TAG", "setHtml");
        view.loadData(html, "text/html; charset=utf-8", "UTF-8");
    }
}

2.创建一个把ReactPackage的子类，把这个视图管理类注册到应用程序包的createViewManagers里；

AppReactPackage.java类


public class AppReactPackage implements ReactPackage{
    ...... ......
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new ReactWebViewManager(),new ReactRTCWebViewManager());
    }
}

3.在MainActivity中的getPackages方法中添加ReactPackage的子类࿱

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/134271