react native自己封装的原生组件(android)

rn端有封装的原生组件列表(react-native-implementation)
下面是rn提供的列表

 // Components
  get AccessibilityInfo() { return require('AccessibilityInfo'); },
  get ActivityIndicator() { return require('ActivityIndicator'); },
  get ART() { return require('ReactNativeART'); },
  get Button() { return require('Button'); },
  get CheckBox() { return require('CheckBox'); },
  get DatePickerIOS() { return require('DatePickerIOS'); },
  get DrawerLayoutAndroid() { return require('DrawerLayoutAndroid'); },
  get FlatList() { return require('FlatList'); },
  get Image() { return require('Image'); },
  get ImageBackground() { return require('ImageBackground'); },
  get ImageEditor() { return require('ImageEditor'); },
  get ImageStore() { return require('ImageStore'); },
  get KeyboardAvoidingView() { return require('KeyboardAvoidingView'); },
  get ListView() { return require('ListView'); },
  get MaskedViewIOS() { return require('MaskedViewIOS'); },
  get Modal() { return require('Modal'); },
  get NavigatorIOS() { return require('NavigatorIOS'); },
  get Picker() { return require('Picker'); },
  get PickerIOS() { return require('PickerIOS'); },
  get ProgressBarAndroid() { return require('ProgressBarAndroid'); },
  get ProgressViewIOS() { return require('ProgressViewIOS'); },
  get SafeAreaView() { return require('SafeAreaView'); },
  get ScrollView() { return require('ScrollView'); },
  get SectionList() { return require('SectionList'); },
  get SegmentedControlIOS() { return require('SegmentedControlIOS'); },
  get Slider() { return require('Slider'); },
  get SnapshotViewIOS() { return require('SnapshotViewIOS'); },
  get Switch() { return require('Switch'); },
  get RefreshControl() { return require('RefreshControl'); },
  get StatusBar() { return require('StatusBar'); },
  get SwipeableFlatList() { return require('SwipeableFlatList'); },
  get SwipeableListView() { return require('SwipeableListView'); },
  get TabBarIOS() { return require('TabBarIOS'); },
  get Text() { return require('Text'); },
  get TextInput() { return require('TextInput'); },
  get ToastAndroid() { return require('ToastAndroid'); },
  get ToolbarAndroid() { return require('ToolbarAndroid'); },
  get Touchable() { return require('Touchable'); },
  get TouchableHighlight() { return require('TouchableHighlight'); },
  get TouchableNativeFeedback() { return require('TouchableNativeFeedback'); },
  get TouchableOpacity() { return require('TouchableOpacity'); },
  get TouchableWithoutFeedback() { return require('TouchableWithoutFeedback'); },
  get View() { return require('View'); },
  get ViewPagerAndroid() { return require('ViewPagerAndroid'); },
  get VirtualizedList() { return require('VirtualizedList'); },
  get WebView() { return require('WebView'); },

我们以webview和statusbar为例找rn封装的原生组件在anroid stutios中的工程目录;

1、webview:
webvisew路径
该文件中的代码

var RCTWebView = requireNativeComponent('RCTWebView', WebView, WebView.extraNativeComponentConfig);

中的 RCTWebView 是在原生中的标志;
原生路径(com.facebook.react.views):
package com.facebook.react.views.webview;

2、statusbar
在这里插入图片描述

const StatusBarManager = require('NativeModules').StatusBarManager;

中的StatusBarManager是原生中的标志;

原生路径(com.facebook.react.modules):
package com.facebook.react.modules.statusbar;

目前已知的就是这两条路径,知道之后,可以根据facebook封装的代码规则,自己封装成自己需要的原生组件;

发布了15 篇原创文章 · 获赞 4 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/wwl901215/article/details/88863012