Question

React 有哪些优秀实用的组件

Answer 1

　　Android React Native 已经将几个常用的原生组件进行了封装，比如 ScrollView 和 TextInput，但是并不是所有系统的原始组件都被封装了，因此有的时候我们不得不自己动手封装一下，从而能够使用那些React Native没有为我们封装的原生组件，比如WebView，官方并没有提供Android端的实现，那么我们现在就动手封装一下WebView。 　　首先，我需要继承SimpleViewManager这个泛型类，和原生模块类似，需要重写getName()方法，将UI组件名称暴露给javascript层，接着需要重写createViewInstance方法，在里面返回我们需要使用的原生UI组件的实例，这里就是WebView。然后就是暴露一些必要属性给javascript层，为了简单起见，我们这里只暴露两个属性，一个是url，一个是html，一旦javascript层设置了url，就会加载一个网页，而一旦设置了html，则会去加载这段html，而属性的暴露是使用注解，将注解设置在对应的set方法上，之后再set方法中处理UI的更新，比如一旦设置了url，在setUrl里面就要加载网页。最终我们的ViewManager就是这样子的 　　public class ReactWebViewManager extends SimpleViewManager<WebView> { 　　public static final String REACT_CLASS = "RCTWebView"; 　　@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"); 　　} 　　} 　　 　　和原生模块一样，原生UI组件也需要进行注册，实现ReactPackage接口，进行WebView的注册。 　　public class AppReactPackage implements ReactPackage { 　　@Override 　　public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { 　　return Collections.emptyList();; 　　} 　　@Override 　　public List<Class<? extends JavaScriptModule>> createJSModules() { 　　return Collections.emptyList(); 　　} 　　@Override 　　public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { 　　return Arrays.<ViewManager>asList( 　　new ReactWebViewManager()); 　　} 　　} 　　将这个ReactPackage添加到ReactInstanceManager实例中去 　　.addPackage(new AppReactPackage()) 　　然后在javascript层新建一个WebView.js文件。输入下面的内容 　　'use strict'; 　　var { requireNativeComponent,PropTypes } = require('react-native'); 　　var iface = { 　　name: 'WebView', 　　propTypes: { 　　url: PropTypes.string, 　　html: PropTypes.string, 　　}, 　　}; 　　module.exports = requireNativeComponent('RCTWebView', iface); 　　可以看到，我们只是在里面指定了属性的类型。 　　到目前为止，你已经可以使用这个WebView组件了。 　　var WebView=require('./WebView');