react-native-macos/Libraries/react-native/react-native-implementation.js

134 строки
6.5 KiB
JavaScript
Исходник Обычный вид История

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule react-native-implementation
* @flow
*/
'use strict';
const invariant = require('fbjs/lib/invariant');
2015-03-23 08:30:06 +03:00
// Export React, plus some native additions.
const ReactNative = {
// 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'); },
MaskedViewIOS -- A way to apply alpha masks to views on iOS Summary: It's very important in complex UIs to be able to apply alpha channel-based masks to arbitrary content. Common use cases include adding gradient masks at the top or bottom of scroll views, creating masked text effects, feathering images, and generally just masking views while still allowing transparency of those views. The original motivation for creating this component stemmed from work on `react-navigation`. As I tried to mimic behavior in the native iOS header, I needed to be able to achieve the effect pictured here (this is a screenshot from a native iOS application): ![iOS native navbar animation](https://slack-imgs.com/?c=1&url=https%3A%2F%2Fd3vv6lp55qjaqc.cloudfront.net%2Fitems%2F0N3g1Q3H423P3m1c1z3E%2FScreen%2520Shot%25202017-07-06%2520at%252011.57.29%2520AM.png) In this image, there are two masks: - A mask on the back button chevron - A gradient mask on the right button In addition, the underlying view in the navigation bar is intended to be a UIBlurView. Thus, alpha masking is the only way to achieve this effect. Behind the scenes, the `maskView` property on `UIView` is used. This is a shortcut to setting the mask on the CALayer directly. This gives us the ability to mask any view with any other view. While building this component (and testing in the context of an Expo app), I was able to use a `GLView` (a view that renders an OpenGL context) to mask a `Video` component! I chose to implement this only on iOS right now, as the Android implementation is a) significantly more complicated and b) will most likely not be as performant (especially when trying to mask more complex views). Review the `<MaskedViewIOS>` section in the RNTester app, observe that views are masked appropriately. ![example](https://d3vv6lp55qjaqc.cloudfront.net/items/250X092v2k3f212f3O16/Screen%20Recording%202017-07-07%20at%2012.18%20PM.gif?X-CloudApp-Visitor-Id=abb33b3e3769bbe2f7b26d13dc5d1442&v=5f9e2d4c) Closes https://github.com/facebook/react-native/pull/14898 Differential Revision: D5398721 Pulled By: javache fbshipit-source-id: 343af874e2d664541aca1fefe922cf7d82aea701
2017-07-12 01:00:54 +03:00
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'); },
// APIs
get ActionSheetIOS() { return require('ActionSheetIOS'); },
get Alert() { return require('Alert'); },
get AlertIOS() { return require('AlertIOS'); },
get Animated() { return require('Animated'); },
get AppRegistry() { return require('AppRegistry'); },
get AppState() { return require('AppState'); },
get AsyncStorage() { return require('AsyncStorage'); },
get BackAndroid() { return require('BackAndroid'); }, // deprecated: use BackHandler instead
get BackHandler() { return require('BackHandler'); },
get CameraRoll() { return require('CameraRoll'); },
get Clipboard() { return require('Clipboard'); },
get DatePickerAndroid() { return require('DatePickerAndroid'); },
get DeviceInfo() { return require('DeviceInfo'); },
get Dimensions() { return require('Dimensions'); },
get Easing() { return require('Easing'); },
get findNodeHandle() { return require('ReactNative').findNodeHandle; },
get I18nManager() { return require('I18nManager'); },
get ImagePickerIOS() { return require('ImagePickerIOS'); },
get InteractionManager() { return require('InteractionManager'); },
get Keyboard() { return require('Keyboard'); },
get LayoutAnimation() { return require('LayoutAnimation'); },
get Linking() { return require('Linking'); },
get NativeEventEmitter() { return require('NativeEventEmitter'); },
get NetInfo() { return require('NetInfo'); },
get PanResponder() { return require('PanResponder'); },
get PermissionsAndroid() { return require('PermissionsAndroid'); },
get PixelRatio() { return require('PixelRatio'); },
get PushNotificationIOS() { return require('PushNotificationIOS'); },
get Settings() { return require('Settings'); },
get Share() { return require('Share'); },
get StatusBarIOS() { return require('StatusBarIOS'); },
get StyleSheet() { return require('StyleSheet'); },
get Systrace() { return require('Systrace'); },
get TimePickerAndroid() { return require('TimePickerAndroid'); },
get TVEventHandler() { return require('TVEventHandler'); },
get UIManager() { return require('UIManager'); },
get unstable_batchedUpdates() { return require('ReactNative').unstable_batchedUpdates; },
get Vibration() { return require('Vibration'); },
get VibrationIOS() { return require('VibrationIOS'); },
// Plugins
get DeviceEventEmitter() { return require('RCTDeviceEventEmitter'); },
get NativeAppEventEmitter() { return require('RCTNativeAppEventEmitter'); },
get NativeModules() { return require('NativeModules'); },
get Platform() { return require('Platform'); },
get processColor() { return require('processColor'); },
get requireNativeComponent() { return require('requireNativeComponent'); },
get takeSnapshot() { return require('takeSnapshot'); },
// Prop Types
get ColorPropType() { return require('ColorPropType'); },
get EdgeInsetsPropType() { return require('EdgeInsetsPropType'); },
get PointPropType() { return require('PointPropType'); },
get ViewPropTypes() { return require('ViewPropTypes'); },
// Deprecated
get Navigator() {
invariant(
false,
'Navigator is deprecated and has been removed from this package. It can now be installed ' +
'and imported from `react-native-deprecated-custom-components` instead of `react-native`. ' +
'Learn about alternative navigation solutions at http://facebook.github.io/react-native/docs/navigation.html'
);
},
};
module.exports = ReactNative;