mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-03-26 07:04:05 +08:00
Release React Native for Android
This is an early release and there are several things that are known not to work if you're porting your iOS app to Android. See the Known Issues guide on the website. We will work with the community to reach platform parity with iOS.
This commit is contained in:
Martin Konicek
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* 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 ActivityIndicatorIOS
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('React');
|
||||
var View = require('View');
|
||||
|
||||
var ActivityIndicatorIOS = React.createClass({
|
||||
render(): ReactElement {
|
||||
return <View {...this.props} />;
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = ActivityIndicatorIOS;
|
||||
46
Libraries/Components/DatePicker/DatePickerIOS.android.js
Normal file
46
Libraries/Components/DatePicker/DatePickerIOS.android.js
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* 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 DatePickerIOS
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var React = require('React');
|
||||
var StyleSheet = require('StyleSheet');
|
||||
var Text = require('Text');
|
||||
var View = require('View');
|
||||
|
||||
var DummyDatePickerIOS = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<View style={[styles.dummyDatePickerIOS, this.props.style]}>
|
||||
<Text style={styles.datePickerText}>DatePickerIOS is not supported on this platform!</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
dummyDatePickerIOS: {
|
||||
height: 100,
|
||||
width: 300,
|
||||
backgroundColor: '#ffbcbc',
|
||||
borderWidth: 1,
|
||||
borderColor: 'red',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: 10,
|
||||
},
|
||||
datePickerText: {
|
||||
color: '#333333',
|
||||
margin: 20,
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = DummyDatePickerIOS;
|
||||
@@ -0,0 +1,224 @@
|
||||
/**
|
||||
* 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 DrawerLayoutAndroid
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var DrawerConsts = require('NativeModules').UIManager.AndroidDrawerLayout.Constants;
|
||||
var NativeMethodsMixin = require('NativeMethodsMixin');
|
||||
var React = require('React');
|
||||
var ReactPropTypes = require('ReactPropTypes');
|
||||
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
|
||||
var RCTUIManager = require('NativeModules').UIManager;
|
||||
var StyleSheet = require('StyleSheet');
|
||||
var View = require('View');
|
||||
|
||||
var createReactNativeComponentClass = require('createReactNativeComponentClass');
|
||||
var dismissKeyboard = require('dismissKeyboard');
|
||||
var merge = require('merge');
|
||||
|
||||
var RK_DRAWER_REF = 'drawerlayout';
|
||||
var INNERVIEW_REF = 'innerView';
|
||||
|
||||
var DrawerLayoutValidAttributes = {
|
||||
drawerWidth: true,
|
||||
drawerPosition: true,
|
||||
};
|
||||
|
||||
var DRAWER_STATES = [
|
||||
'Idle',
|
||||
'Dragging',
|
||||
'Settling',
|
||||
];
|
||||
|
||||
/**
|
||||
* React component that wraps the platform `DrawerLayout` (Android only). The
|
||||
* Drawer (typically used for navigation) is rendered with `renderNavigationView`
|
||||
* and direct children are the main view (where your content goes). The navigation
|
||||
* view is initially not visible on the screen, but can be pulled in from the
|
||||
* side of the window specified by the `drawerPosition` prop and its width can
|
||||
* be set by the `drawerWidth` prop.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* render: function() {
|
||||
* var navigationView = (
|
||||
* <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
|
||||
* );
|
||||
* return (
|
||||
* <DrawerLayoutAndroid
|
||||
* drawerWidth={300}
|
||||
* drawerPosition={DrawerLayoutAndroid.positions.Left}
|
||||
* renderNavigationView={() => navigationView}>
|
||||
* <Text style={{10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
|
||||
* <Text style={{10, fontSize: 15, textAlign: 'right'}}>World!</Text>
|
||||
* </DrawerLayoutAndroid>
|
||||
* );
|
||||
* },
|
||||
* ```
|
||||
*/
|
||||
var DrawerLayoutAndroid = React.createClass({
|
||||
statics: {
|
||||
positions: DrawerConsts.DrawerPosition,
|
||||
},
|
||||
|
||||
propTypes: {
|
||||
/**
|
||||
* Determines whether the keyboard gets dismissed in response to a drag.
|
||||
* - 'none' (the default), drags do not dismiss the keyboard.
|
||||
* - 'on-drag', the keyboard is dismissed when a drag begins.
|
||||
*/
|
||||
keyboardDismissMode: ReactPropTypes.oneOf([
|
||||
'none', // default
|
||||
'on-drag',
|
||||
]),
|
||||
/**
|
||||
* Specifies the side of the screen from which the drawer will slide in.
|
||||
*/
|
||||
drawerPosition: ReactPropTypes.oneOf([
|
||||
DrawerConsts.DrawerPosition.Left,
|
||||
DrawerConsts.DrawerPosition.Right
|
||||
]),
|
||||
/**
|
||||
* Specifies the width of the drawer, more precisely the width of the view that be pulled in
|
||||
* from the edge of the window.
|
||||
*/
|
||||
drawerWidth: ReactPropTypes.number,
|
||||
/**
|
||||
* Function called whenever there is an interaction with the navigation view.
|
||||
*/
|
||||
onDrawerSlide: ReactPropTypes.func,
|
||||
/**
|
||||
* Function called when the drawer state has changed. The drawer can be in 3 states:
|
||||
* - idle, meaning there is no interaction with the navigation view happening at the time
|
||||
* - dragging, meaning there is currently an interation with the navigation view
|
||||
* - settling, meaning that there was an interaction with the navigation view, and the
|
||||
* navigation view is now finishing it's closing or opening animation
|
||||
*/
|
||||
onDrawerStateChanged: ReactPropTypes.func,
|
||||
/**
|
||||
* Function called whenever the navigation view has been opened.
|
||||
*/
|
||||
onDrawerOpen: ReactPropTypes.func,
|
||||
/**
|
||||
* Function called whenever the navigation view has been closed.
|
||||
*/
|
||||
onDrawerClose: ReactPropTypes.func,
|
||||
/**
|
||||
* The navigation view that will be rendered to the side of the screen and can be pulled in.
|
||||
*/
|
||||
renderNavigationView: ReactPropTypes.func.isRequired,
|
||||
},
|
||||
|
||||
mixins: [NativeMethodsMixin],
|
||||
|
||||
getInnerViewNode: function() {
|
||||
return this.refs[INNERVIEW_REF].getInnerViewNode();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var drawerViewWrapper =
|
||||
<View style={[styles.drawerSubview, {width: this.props.drawerWidth}]} collapsable={false}>
|
||||
{this.props.renderNavigationView()}
|
||||
</View>;
|
||||
var childrenWrapper =
|
||||
<View ref={INNERVIEW_REF} style={styles.mainSubview} collapsable={false}>
|
||||
{this.props.children}
|
||||
</View>;
|
||||
return (
|
||||
<AndroidDrawerLayout
|
||||
{...this.props}
|
||||
ref={RK_DRAWER_REF}
|
||||
drawerWidth={this.props.drawerWidth}
|
||||
drawerPosition={this.props.drawerPosition}
|
||||
style={styles.base}
|
||||
onDrawerSlide={this._onDrawerSlide}
|
||||
onDrawerOpen={this._onDrawerOpen}
|
||||
onDrawerClose={this._onDrawerClose}
|
||||
onDrawerStateChanged={this._onDrawerStateChanged}>
|
||||
{childrenWrapper}
|
||||
{drawerViewWrapper}
|
||||
</AndroidDrawerLayout>
|
||||
);
|
||||
},
|
||||
|
||||
_onDrawerSlide: function(event) {
|
||||
if (this.props.onDrawerSlide) {
|
||||
this.props.onDrawerSlide(event);
|
||||
}
|
||||
if (this.props.keyboardDismissMode === 'on-drag') {
|
||||
dismissKeyboard();
|
||||
}
|
||||
},
|
||||
|
||||
_onDrawerOpen: function() {
|
||||
if (this.props.onDrawerOpen) {
|
||||
this.props.onDrawerOpen();
|
||||
}
|
||||
},
|
||||
|
||||
_onDrawerClose: function() {
|
||||
if (this.props.onDrawerClose) {
|
||||
this.props.onDrawerClose();
|
||||
}
|
||||
},
|
||||
|
||||
_onDrawerStateChanged: function(event) {
|
||||
if (this.props.onDrawerStateChanged) {
|
||||
this.props.onDrawerStateChanged(DRAWER_STATES[event.nativeEvent.drawerState]);
|
||||
}
|
||||
},
|
||||
|
||||
openDrawer: function() {
|
||||
RCTUIManager.dispatchViewManagerCommand(
|
||||
this._getDrawerLayoutHandle(),
|
||||
RCTUIManager.AndroidDrawerLayout.Commands.openDrawer,
|
||||
null
|
||||
);
|
||||
},
|
||||
|
||||
closeDrawer: function() {
|
||||
RCTUIManager.dispatchViewManagerCommand(
|
||||
this._getDrawerLayoutHandle(),
|
||||
RCTUIManager.AndroidDrawerLayout.Commands.closeDrawer,
|
||||
null
|
||||
);
|
||||
},
|
||||
|
||||
_getDrawerLayoutHandle: function() {
|
||||
return React.findNodeHandle(this.refs[RK_DRAWER_REF]);
|
||||
},
|
||||
});
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
base: {
|
||||
flex: 1,
|
||||
},
|
||||
mainSubview: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
drawerSubview: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// The View that contains both the actual drawer and the main view
|
||||
var AndroidDrawerLayout = createReactNativeComponentClass({
|
||||
validAttributes: merge(ReactNativeViewAttributes.UIView, DrawerLayoutValidAttributes),
|
||||
uiViewClassName: 'AndroidDrawerLayout',
|
||||
});
|
||||
|
||||
module.exports = DrawerLayoutAndroid;
|
||||
13
Libraries/Components/Navigation/NavigatorIOS.android.js
Normal file
13
Libraries/Components/Navigation/NavigatorIOS.android.js
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* 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 NavigatorIOS
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
module.exports = require('UnimplementedView');
|
||||
@@ -0,0 +1,217 @@
|
||||
/**
|
||||
* 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 NavigatorBreadcrumbNavigationBarStyles
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var Dimensions = require('Dimensions');
|
||||
var NavigatorNavigationBarStyles = require('NavigatorNavigationBarStyles');
|
||||
|
||||
var buildStyleInterpolator = require('buildStyleInterpolator');
|
||||
var merge = require('merge');
|
||||
|
||||
var SCREEN_WIDTH = Dimensions.get('window').width;
|
||||
var NAV_BAR_HEIGHT = NavigatorNavigationBarStyles.General.NavBarHeight;
|
||||
|
||||
var SPACING = 8;
|
||||
var ICON_WIDTH = 40;
|
||||
var SEPARATOR_WIDTH = 9;
|
||||
var CRUMB_WIDTH = ICON_WIDTH + SEPARATOR_WIDTH;
|
||||
var NAV_ELEMENT_HEIGHT = NAV_BAR_HEIGHT;
|
||||
|
||||
var OPACITY_RATIO = 100;
|
||||
var ICON_INACTIVE_OPACITY = 0.6;
|
||||
var MAX_BREADCRUMBS = 10;
|
||||
|
||||
var CRUMB_BASE = {
|
||||
position: 'absolute',
|
||||
flexDirection: 'row',
|
||||
top: 0,
|
||||
width: CRUMB_WIDTH,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
};
|
||||
|
||||
var ICON_BASE = {
|
||||
width: ICON_WIDTH,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
};
|
||||
|
||||
var SEPARATOR_BASE = {
|
||||
width: SEPARATOR_WIDTH,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
};
|
||||
|
||||
var TITLE_BASE = {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
alignItems: 'flex-start',
|
||||
};
|
||||
|
||||
var FIRST_TITLE_BASE = merge(TITLE_BASE, {
|
||||
left: 0,
|
||||
right: 0,
|
||||
});
|
||||
|
||||
var RIGHT_BUTTON_BASE = {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
overflow: 'hidden',
|
||||
opacity: 1,
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
};
|
||||
|
||||
/**
|
||||
* Precompute crumb styles so that they don't need to be recomputed on every
|
||||
* interaction.
|
||||
*/
|
||||
var LEFT = [];
|
||||
var CENTER = [];
|
||||
var RIGHT = [];
|
||||
for (var i = 0; i < MAX_BREADCRUMBS; i++) {
|
||||
var crumbLeft = CRUMB_WIDTH * i + SPACING;
|
||||
LEFT[i] = {
|
||||
Crumb: merge(CRUMB_BASE, { left: crumbLeft }),
|
||||
Icon: merge(ICON_BASE, { opacity: ICON_INACTIVE_OPACITY }),
|
||||
Separator: merge(SEPARATOR_BASE, { opacity: 1 }),
|
||||
Title: merge(TITLE_BASE, { left: crumbLeft, opacity: 0 }),
|
||||
RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 0 }),
|
||||
};
|
||||
CENTER[i] = {
|
||||
Crumb: merge(CRUMB_BASE, { left: crumbLeft }),
|
||||
Icon: merge(ICON_BASE, { opacity: 1 }),
|
||||
Separator: merge(SEPARATOR_BASE, { opacity: 0 }),
|
||||
Title: merge(TITLE_BASE, {
|
||||
left: crumbLeft + ICON_WIDTH,
|
||||
opacity: 1,
|
||||
}),
|
||||
RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 1 }),
|
||||
};
|
||||
var crumbRight = crumbLeft + 50;
|
||||
RIGHT[i] = {
|
||||
Crumb: merge(CRUMB_BASE, { left: crumbRight}),
|
||||
Icon: merge(ICON_BASE, { opacity: 0 }),
|
||||
Separator: merge(SEPARATOR_BASE, { opacity: 0 }),
|
||||
Title: merge(TITLE_BASE, {
|
||||
left: crumbRight + ICON_WIDTH,
|
||||
opacity: 0,
|
||||
}),
|
||||
RightItem: merge(RIGHT_BUTTON_BASE, { opacity: 0 }),
|
||||
};
|
||||
}
|
||||
|
||||
// Special case the CENTER state of the first scene.
|
||||
CENTER[0] = {
|
||||
Crumb: merge(CRUMB_BASE, {left: SPACING + CRUMB_WIDTH}),
|
||||
Icon: merge(ICON_BASE, {opacity: 0}),
|
||||
Separator: merge(SEPARATOR_BASE, {opacity: 0}),
|
||||
Title: merge(FIRST_TITLE_BASE, {opacity: 1}),
|
||||
RightItem: CENTER[0].RightItem,
|
||||
};
|
||||
LEFT[0].Title = merge(FIRST_TITLE_BASE, {opacity: 0});
|
||||
RIGHT[0].Title = merge(FIRST_TITLE_BASE, {opacity: 0});
|
||||
|
||||
|
||||
var buildIndexSceneInterpolator = function(startStyles, endStyles) {
|
||||
return {
|
||||
Crumb: buildStyleInterpolator({
|
||||
translateX: {
|
||||
type: 'linear',
|
||||
from: 0,
|
||||
to: endStyles.Crumb.left - startStyles.Crumb.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
left: {
|
||||
value: startStyles.Crumb.left,
|
||||
type: 'constant'
|
||||
},
|
||||
}),
|
||||
Icon: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Icon.opacity,
|
||||
to: endStyles.Icon.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
}),
|
||||
Separator: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Separator.opacity,
|
||||
to: endStyles.Separator.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
}),
|
||||
Title: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Title.opacity,
|
||||
to: endStyles.Title.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
translateX: {
|
||||
type: 'linear',
|
||||
from: 0,
|
||||
to: endStyles.Title.left - startStyles.Title.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
left: {
|
||||
value: startStyles.Title.left,
|
||||
type: 'constant'
|
||||
},
|
||||
}),
|
||||
RightItem: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.RightItem.opacity,
|
||||
to: endStyles.RightItem.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
round: OPACITY_RATIO,
|
||||
},
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
var Interpolators = CENTER.map(function(_, ii) {
|
||||
return {
|
||||
// Animating *into* the center stage from the right
|
||||
RightToCenter: buildIndexSceneInterpolator(RIGHT[ii], CENTER[ii]),
|
||||
// Animating out of the center stage, to the left
|
||||
CenterToLeft: buildIndexSceneInterpolator(CENTER[ii], LEFT[ii]),
|
||||
// Both stages (animating *past* the center stage)
|
||||
RightToLeft: buildIndexSceneInterpolator(RIGHT[ii], LEFT[ii]),
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* Contains constants that are used in constructing both `StyleSheet`s and
|
||||
* inline styles during transitions.
|
||||
*/
|
||||
module.exports = {
|
||||
Interpolators,
|
||||
Left: LEFT,
|
||||
Center: CENTER,
|
||||
Right: RIGHT,
|
||||
IconWidth: ICON_WIDTH,
|
||||
IconHeight: NAV_BAR_HEIGHT,
|
||||
SeparatorWidth: SEPARATOR_WIDTH,
|
||||
SeparatorHeight: NAV_BAR_HEIGHT,
|
||||
};
|
||||
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* 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 NavigatorNavigationBarStyles
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var buildStyleInterpolator = require('buildStyleInterpolator');
|
||||
var merge = require('merge');
|
||||
|
||||
// Android Material Design
|
||||
var NAV_BAR_HEIGHT = 56;
|
||||
var TITLE_LEFT = 72;
|
||||
var BUTTON_SIZE = 24;
|
||||
var TOUCH_TARGT_SIZE = 48;
|
||||
var BUTTON_HORIZONTAL_MARGIN = 16;
|
||||
|
||||
var BUTTON_EFFECTIVE_MARGIN = BUTTON_HORIZONTAL_MARGIN - (TOUCH_TARGT_SIZE - BUTTON_SIZE) / 2;
|
||||
var NAV_ELEMENT_HEIGHT = NAV_BAR_HEIGHT;
|
||||
|
||||
var BASE_STYLES = {
|
||||
Title: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
alignItems: 'flex-start',
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
marginLeft: TITLE_LEFT,
|
||||
},
|
||||
LeftButton: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: BUTTON_EFFECTIVE_MARGIN,
|
||||
overflow: 'hidden',
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
RightButton: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: BUTTON_EFFECTIVE_MARGIN,
|
||||
overflow: 'hidden',
|
||||
alignItems: 'flex-end',
|
||||
height: NAV_ELEMENT_HEIGHT,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
};
|
||||
|
||||
// There are 3 stages: left, center, right. All previous navigation
|
||||
// items are in the left stage. The current navigation item is in the
|
||||
// center stage. All upcoming navigation items are in the right stage.
|
||||
// Another way to think of the stages is in terms of transitions. When
|
||||
// we move forward in the navigation stack, we perform a
|
||||
// right-to-center transition on the new navigation item and a
|
||||
// center-to-left transition on the current navigation item.
|
||||
var Stages = {
|
||||
Left: {
|
||||
Title: merge(BASE_STYLES.Title, { opacity: 0 }),
|
||||
LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }),
|
||||
RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }),
|
||||
},
|
||||
Center: {
|
||||
Title: merge(BASE_STYLES.Title, { opacity: 1 }),
|
||||
LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 1 }),
|
||||
RightButton: merge(BASE_STYLES.RightButton, { opacity: 1 }),
|
||||
},
|
||||
Right: {
|
||||
Title: merge(BASE_STYLES.Title, { opacity: 0 }),
|
||||
LeftButton: merge(BASE_STYLES.LeftButton, { opacity: 0 }),
|
||||
RightButton: merge(BASE_STYLES.RightButton, { opacity: 0 }),
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
var opacityRatio = 100;
|
||||
|
||||
function buildSceneInterpolators(startStyles, endStyles) {
|
||||
return {
|
||||
Title: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.Title.opacity,
|
||||
to: endStyles.Title.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.Title.left,
|
||||
to: endStyles.Title.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
}),
|
||||
LeftButton: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.LeftButton.opacity,
|
||||
to: endStyles.LeftButton.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
round: opacityRatio,
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.LeftButton.left,
|
||||
to: endStyles.LeftButton.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
},
|
||||
}),
|
||||
RightButton: buildStyleInterpolator({
|
||||
opacity: {
|
||||
type: 'linear',
|
||||
from: startStyles.RightButton.opacity,
|
||||
to: endStyles.RightButton.opacity,
|
||||
min: 0,
|
||||
max: 1,
|
||||
round: opacityRatio,
|
||||
},
|
||||
left: {
|
||||
type: 'linear',
|
||||
from: startStyles.RightButton.left,
|
||||
to: endStyles.RightButton.left,
|
||||
min: 0,
|
||||
max: 1,
|
||||
extrapolate: true,
|
||||
},
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
var Interpolators = {
|
||||
// Animating *into* the center stage from the right
|
||||
RightToCenter: buildSceneInterpolators(Stages.Right, Stages.Center),
|
||||
// Animating out of the center stage, to the left
|
||||
CenterToLeft: buildSceneInterpolators(Stages.Center, Stages.Left),
|
||||
// Both stages (animating *past* the center stage)
|
||||
RightToLeft: buildSceneInterpolators(Stages.Right, Stages.Left),
|
||||
};
|
||||
|
||||
|
||||
module.exports = {
|
||||
General: {
|
||||
NavBarHeight: NAV_BAR_HEIGHT,
|
||||
StatusBarHeight: 0,
|
||||
TotalNavHeight: NAV_BAR_HEIGHT,
|
||||
},
|
||||
Interpolators,
|
||||
Stages,
|
||||
};
|
||||
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* 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 ProgressBarAndroid
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var NativeMethodsMixin = require('NativeMethodsMixin');
|
||||
var React = require('React');
|
||||
var ReactPropTypes = require('ReactPropTypes');
|
||||
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
|
||||
|
||||
var createReactNativeComponentClass = require('createReactNativeComponentClass');
|
||||
|
||||
var STYLE_ATTRIBUTES = [
|
||||
'Horizontal',
|
||||
'Small',
|
||||
'Large',
|
||||
'Inverse',
|
||||
'SmallInverse',
|
||||
'LargeInverse'
|
||||
];
|
||||
|
||||
/**
|
||||
* React component that wraps the Android-only `ProgressBar`. This component is used to indicate
|
||||
* that the app is loading or there is some activity in the app.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* render: function() {
|
||||
* var progressBar =
|
||||
* <View style={styles.container}>
|
||||
* <ProgressBar styleAttr="Inverse" />
|
||||
* </View>;
|
||||
|
||||
* return (
|
||||
* <MyLoadingComponent
|
||||
* componentView={componentView}
|
||||
* loadingView={progressBar}
|
||||
* style={styles.loadingComponent}
|
||||
* />
|
||||
* );
|
||||
* },
|
||||
* ```
|
||||
*/
|
||||
var ProgressBarAndroid = React.createClass({
|
||||
propTypes: {
|
||||
/**
|
||||
* Style of the ProgressBar. One of:
|
||||
*
|
||||
* - Horizontal
|
||||
* - Small
|
||||
* - Large
|
||||
* - Inverse
|
||||
* - SmallInverse
|
||||
* - LargeInverse
|
||||
*/
|
||||
styleAttr: ReactPropTypes.oneOf(STYLE_ATTRIBUTES),
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID: ReactPropTypes.string,
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
styleAttr: 'Large',
|
||||
};
|
||||
},
|
||||
|
||||
mixins: [NativeMethodsMixin],
|
||||
|
||||
render: function() {
|
||||
return <AndroidProgressBar {...this.props} />;
|
||||
},
|
||||
});
|
||||
|
||||
var AndroidProgressBar = createReactNativeComponentClass({
|
||||
validAttributes: {
|
||||
...ReactNativeViewAttributes.UIView,
|
||||
styleAttr: true,
|
||||
},
|
||||
uiViewClassName: 'AndroidProgressBar',
|
||||
});
|
||||
|
||||
module.exports = ProgressBarAndroid;
|
||||
14
Libraries/Components/SliderIOS/SliderIOS.android.js
Normal file
14
Libraries/Components/SliderIOS/SliderIOS.android.js
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* 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 SliderIOS
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = require('UnimplementedView');
|
||||
14
Libraries/Components/StatusBar/StatusBarIOS.android.js
Normal file
14
Libraries/Components/StatusBar/StatusBarIOS.android.js
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* 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 StatusBarIOS
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
module.exports = null;
|
||||
80
Libraries/Components/SwitchAndroid/SwitchAndroid.android.js
Normal file
80
Libraries/Components/SwitchAndroid/SwitchAndroid.android.js
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* 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 SwitchAndroid
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var NativeMethodsMixin = require('NativeMethodsMixin');
|
||||
var PropTypes = require('ReactPropTypes');
|
||||
var React = require('React');
|
||||
|
||||
var requireNativeComponent = require('requireNativeComponent');
|
||||
|
||||
var SWITCH = 'switch';
|
||||
|
||||
/**
|
||||
* Standard Android two-state toggle component
|
||||
*/
|
||||
var SwitchAndroid = React.createClass({
|
||||
mixins: [NativeMethodsMixin],
|
||||
|
||||
propTypes: {
|
||||
/**
|
||||
* Boolean value of the switch.
|
||||
*/
|
||||
value: PropTypes.bool,
|
||||
/**
|
||||
* If `true`, this component can't be interacted with.
|
||||
*/
|
||||
disabled: PropTypes.bool,
|
||||
/**
|
||||
* Invoked with the new value when the value chages.
|
||||
*/
|
||||
onValueChange: PropTypes.func,
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID: PropTypes.string,
|
||||
},
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
value: false,
|
||||
disabled: false,
|
||||
};
|
||||
},
|
||||
|
||||
_onChange: function(event) {
|
||||
this.props.onChange && this.props.onChange(event);
|
||||
this.props.onValueChange && this.props.onValueChange(event.nativeEvent.value);
|
||||
|
||||
// The underlying switch might have changed, but we're controlled,
|
||||
// and so want to ensure it represents our value.
|
||||
this.refs[SWITCH].setNativeProps({on: this.props.value});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<RKSwitch
|
||||
ref={SWITCH}
|
||||
style={this.props.style}
|
||||
enabled={!this.props.disabled}
|
||||
on={this.props.value}
|
||||
onChange={this._onChange}
|
||||
testID={this.props.testID}
|
||||
onStartShouldSetResponder={() => true}
|
||||
onResponderTerminationRequest={() => false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var RKSwitch = requireNativeComponent('AndroidSwitch', null);
|
||||
|
||||
module.exports = SwitchAndroid;
|
||||
38
Libraries/Components/ToastAndroid/ToastAndroid.android.js
Normal file
38
Libraries/Components/ToastAndroid/ToastAndroid.android.js
Normal file
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* 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 ToastAndroid
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var RCTToastAndroid = require('NativeModules').ToastAndroid;
|
||||
|
||||
/**
|
||||
* This exposes the native ToastAndroid module as a JS module. This has a function 'showText'
|
||||
* which takes the following parameters:
|
||||
*
|
||||
* 1. String message: A string with the text to toast
|
||||
* 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
|
||||
*/
|
||||
|
||||
var ToastAndroid = {
|
||||
|
||||
SHORT: RCTToastAndroid.SHORT,
|
||||
LONG: RCTToastAndroid.LONG,
|
||||
|
||||
show: function (
|
||||
message: string,
|
||||
duration: number
|
||||
): void {
|
||||
RCTToastAndroid.show(message, duration);
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
module.exports = ToastAndroid;
|
||||
174
Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js
Normal file
174
Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js
Normal file
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* 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 ToolbarAndroid
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var Image = require('Image');
|
||||
var NativeMethodsMixin = require('NativeMethodsMixin');
|
||||
var React = require('React');
|
||||
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
|
||||
var ReactPropTypes = require('ReactPropTypes');
|
||||
|
||||
var createReactNativeComponentClass = require('createReactNativeComponentClass');
|
||||
|
||||
/**
|
||||
* React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo,
|
||||
* navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and
|
||||
* subtitle are expanded so the logo and navigation icons are displayed on the left, title and
|
||||
* subtitle in the middle and the actions on the right.
|
||||
*
|
||||
* If the toolbar has an only child, it will be displayed between the title and actions.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* render: function() {
|
||||
* return (
|
||||
* <ToolbarAndroid
|
||||
* logo={require('image!app_logo')}
|
||||
* title="AwesomeApp"
|
||||
* actions={[{title: 'Settings', icon: require('image!icon_settings'), show: 'always'}]}
|
||||
* onActionSelected={this.onActionSelected} />
|
||||
* )
|
||||
* },
|
||||
* onActionSelected: function(position) {
|
||||
* if (position === 0) { // index of 'Settings'
|
||||
* showSettings();
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
|
||||
*/
|
||||
var ToolbarAndroid = React.createClass({
|
||||
mixins: [NativeMethodsMixin],
|
||||
|
||||
propTypes: {
|
||||
/**
|
||||
* Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
|
||||
* or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
|
||||
* menu.
|
||||
*
|
||||
* This property takes an array of objects, where each object has the following keys:
|
||||
*
|
||||
* * `title`: **required**, the title of this action
|
||||
* * `icon`: the icon for this action, e.g. `require('image!some_icon')`
|
||||
* * `show`: when to show this action as an icon or hide it in the overflow menu: `always`,
|
||||
* `ifRoom` or `never`
|
||||
* * `showWithText`: boolean, whether to show text alongside the icon or not
|
||||
*/
|
||||
actions: ReactPropTypes.arrayOf(ReactPropTypes.shape({
|
||||
title: ReactPropTypes.string.isRequired,
|
||||
icon: Image.propTypes.source,
|
||||
show: ReactPropTypes.oneOf(['always', 'ifRoom', 'never']),
|
||||
showWithText: ReactPropTypes.bool
|
||||
})),
|
||||
/**
|
||||
* Sets the toolbar logo.
|
||||
*/
|
||||
logo: Image.propTypes.source,
|
||||
/**
|
||||
* Sets the navigation icon.
|
||||
*/
|
||||
navIcon: Image.propTypes.source,
|
||||
/**
|
||||
* Callback that is called when an action is selected. The only argument that is passeed to the
|
||||
* callback is the position of the action in the actions array.
|
||||
*/
|
||||
onActionSelected: ReactPropTypes.func,
|
||||
/**
|
||||
* Callback called when the icon is selected.
|
||||
*/
|
||||
onIconClicked: ReactPropTypes.func,
|
||||
/**
|
||||
* Sets the toolbar subtitle.
|
||||
*/
|
||||
subtitle: ReactPropTypes.string,
|
||||
/**
|
||||
* Sets the toolbar subtitle color.
|
||||
*/
|
||||
subtitleColor: ReactPropTypes.string,
|
||||
/**
|
||||
* Sets the toolbar title.
|
||||
*/
|
||||
title: ReactPropTypes.string,
|
||||
/**
|
||||
* Sets the toolbar title color.
|
||||
*/
|
||||
titleColor: ReactPropTypes.string,
|
||||
/**
|
||||
* Used to locate this view in end-to-end tests.
|
||||
*/
|
||||
testID: ReactPropTypes.string,
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var nativeProps = {
|
||||
...this.props,
|
||||
};
|
||||
if (this.props.logo) {
|
||||
if (!this.props.logo.isStatic) {
|
||||
throw 'logo prop should be a static image (obtained via ix)';
|
||||
}
|
||||
nativeProps.logo = this.props.logo.uri;
|
||||
}
|
||||
if (this.props.navIcon) {
|
||||
if (!this.props.navIcon.isStatic) {
|
||||
throw 'navIcon prop should be static image (obtained via ix)';
|
||||
}
|
||||
nativeProps.navIcon = this.props.navIcon.uri;
|
||||
}
|
||||
if (this.props.actions) {
|
||||
nativeProps.actions = [];
|
||||
for (var i = 0; i < this.props.actions.length; i++) {
|
||||
var action = {
|
||||
...this.props.actions[i],
|
||||
};
|
||||
if (action.icon) {
|
||||
if (!action.icon.isStatic) {
|
||||
throw 'action icons should be static images (obtained via ix)';
|
||||
}
|
||||
action.icon = action.icon.uri;
|
||||
}
|
||||
nativeProps.actions.push(action);
|
||||
}
|
||||
}
|
||||
|
||||
return <NativeToolbar onSelect={this._onSelect} {...nativeProps} />;
|
||||
},
|
||||
|
||||
_onSelect: function(event) {
|
||||
var position = event.nativeEvent.position;
|
||||
if (position === -1) {
|
||||
this.props.onIconClicked && this.props.onIconClicked();
|
||||
} else {
|
||||
this.props.onActionSelected && this.props.onActionSelected(position);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
var toolbarAttributes = {
|
||||
...ReactNativeViewAttributes.UIView,
|
||||
actions: true,
|
||||
logo: true,
|
||||
navIcon: true,
|
||||
subtitle: true,
|
||||
subtitleColor: true,
|
||||
title: true,
|
||||
titleColor: true,
|
||||
};
|
||||
|
||||
var NativeToolbar = createReactNativeComponentClass({
|
||||
validAttributes: toolbarAttributes,
|
||||
uiViewClassName: 'ToolbarAndroid',
|
||||
});
|
||||
|
||||
module.exports = ToolbarAndroid;
|
||||
@@ -0,0 +1,219 @@
|
||||
/**
|
||||
* 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 TouchableNativeFeedback
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var PropTypes = require('ReactPropTypes');
|
||||
var RCTUIManager = require('NativeModules').UIManager;
|
||||
var React = require('React');
|
||||
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
|
||||
var Touchable = require('Touchable');
|
||||
var TouchableWithoutFeedback = require('TouchableWithoutFeedback');
|
||||
|
||||
var createReactNativeComponentClass = require('createReactNativeComponentClass');
|
||||
var createStrictShapeTypeChecker = require('createStrictShapeTypeChecker');
|
||||
var ensurePositiveDelayProps = require('ensurePositiveDelayProps');
|
||||
var onlyChild = require('onlyChild');
|
||||
|
||||
var rippleBackgroundPropType = createStrictShapeTypeChecker({
|
||||
type: React.PropTypes.oneOf(['RippleAndroid']),
|
||||
color: PropTypes.string,
|
||||
borderless: PropTypes.bool,
|
||||
});
|
||||
|
||||
var themeAttributeBackgroundPropType = createStrictShapeTypeChecker({
|
||||
type: React.PropTypes.oneOf(['ThemeAttrAndroid']),
|
||||
attribute: PropTypes.string.isRequired,
|
||||
});
|
||||
|
||||
var backgroundPropType = PropTypes.oneOfType([
|
||||
rippleBackgroundPropType,
|
||||
themeAttributeBackgroundPropType,
|
||||
]);
|
||||
|
||||
var TouchableView = createReactNativeComponentClass({
|
||||
validAttributes: {
|
||||
...ReactNativeViewAttributes.UIView,
|
||||
nativeBackgroundAndroid: backgroundPropType,
|
||||
},
|
||||
uiViewClassName: 'RCTView',
|
||||
});
|
||||
|
||||
var PRESS_RECT_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
|
||||
|
||||
/**
|
||||
* A wrapper for making views respond properly to touches (Android only).
|
||||
* On Android this component uses native state drawable to display touch
|
||||
* feedback. At the moment it only supports having a single View instance as a
|
||||
* child node, as it's implemented by replacing that View with another instance
|
||||
* of RCTView node with some additional properties set.
|
||||
*
|
||||
* Background drawable of native feedback touchable can be customized with
|
||||
* `background` property.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
* ```
|
||||
* renderButton: function() {
|
||||
* return (
|
||||
* <TouchableNativeFeedback
|
||||
* onPress={this._onPressButton}
|
||||
* background={TouchableNativeFeedback.SelectableBackground()}>
|
||||
* <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
|
||||
* <Text style={{margin: 30}}>Button</Text>
|
||||
* </View>
|
||||
* </TouchableHighlight>
|
||||
* );
|
||||
* },
|
||||
* ```
|
||||
*/
|
||||
|
||||
var TouchableNativeFeedback = React.createClass({
|
||||
propTypes: {
|
||||
...TouchableWithoutFeedback.propTypes,
|
||||
|
||||
/**
|
||||
* Determines the type of background drawable that's going to be used to
|
||||
* display feedback. It takes an object with `type` property and extra data
|
||||
* depending on the `type`. It's recommended to use one of the following
|
||||
* static methods to generate that dictionary:
|
||||
*
|
||||
* 1) TouchableNativeFeedback.SelectableBackground() - will create object
|
||||
* that represents android theme's default background for selectable
|
||||
* elements (?android:attr/selectableItemBackground)
|
||||
*
|
||||
* 2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create
|
||||
* object that represent android theme's default background for borderless
|
||||
* selectable elements (?android:attr/selectableItemBackgroundBorderless).
|
||||
* Available on android API level 21+
|
||||
*
|
||||
* 3) TouchableNativeFeedback.RippleAndroid(color, borderless) - will create
|
||||
* object that represents ripple drawable with specified color (as a
|
||||
* string). If property `borderless` evaluates to true the ripple will
|
||||
* render outside of the view bounds (see native actionbar buttons as an
|
||||
* example of that behavior). This background type is available on Android
|
||||
* API level 21+
|
||||
*/
|
||||
background: backgroundPropType,
|
||||
},
|
||||
|
||||
statics: {
|
||||
SelectableBackground: function() {
|
||||
return {type: 'ThemeAttrAndroid', attribute: 'selectableItemBackground'};
|
||||
},
|
||||
SelectableBackgroundBorderless: function() {
|
||||
return {type: 'ThemeAttrAndroid', attribute: 'selectableItemBackgroundBorderless'};
|
||||
},
|
||||
Ripple: function(color, borderless) {
|
||||
return {type: 'RippleAndroid', color: color, borderless: borderless};
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [Touchable.Mixin],
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
background: this.SelectableBackground(),
|
||||
};
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return this.touchableGetInitialState();
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
ensurePositiveDelayProps(this.props);
|
||||
},
|
||||
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
ensurePositiveDelayProps(nextProps);
|
||||
},
|
||||
|
||||
/**
|
||||
* `Touchable.Mixin` self callbacks. The mixin will invoke these if they are
|
||||
* defined on your component.
|
||||
*/
|
||||
touchableHandleActivePressIn: function() {
|
||||
this.props.onPressIn && this.props.onPressIn();
|
||||
this._dispatchPressedStateChange(true);
|
||||
this._dispatchHotspotUpdate(this.pressInLocation.pageX, this.pressInLocation.pageY);
|
||||
},
|
||||
|
||||
touchableHandleActivePressOut: function() {
|
||||
this.props.onPressOut && this.props.onPressOut();
|
||||
this._dispatchPressedStateChange(false);
|
||||
},
|
||||
|
||||
touchableHandlePress: function() {
|
||||
this.props.onPress && this.props.onPress();
|
||||
},
|
||||
|
||||
touchableHandleLongPress: function() {
|
||||
this.props.onLongPress && this.props.onLongPress();
|
||||
},
|
||||
|
||||
touchableGetPressRectOffset: function() {
|
||||
return PRESS_RECT_OFFSET; // Always make sure to predeclare a constant!
|
||||
},
|
||||
|
||||
touchableGetHighlightDelayMS: function() {
|
||||
return this.props.delayPressIn;
|
||||
},
|
||||
|
||||
touchableGetLongPressDelayMS: function() {
|
||||
return this.props.delayLongPress;
|
||||
},
|
||||
|
||||
touchableGetPressOutDelayMS: function() {
|
||||
return this.props.delayPressOut;
|
||||
},
|
||||
|
||||
_handleResponderMove: function(e) {
|
||||
this.touchableHandleResponderMove(e);
|
||||
this._dispatchHotspotUpdate(e.nativeEvent.pageX, e.nativeEvent.pageY);
|
||||
},
|
||||
|
||||
_dispatchHotspotUpdate: function(destX, destY) {
|
||||
RCTUIManager.dispatchViewManagerCommand(
|
||||
React.findNodeHandle(this),
|
||||
RCTUIManager.RCTView.Commands.hotspotUpdate,
|
||||
[destX || 0, destY || 0]
|
||||
);
|
||||
},
|
||||
|
||||
_dispatchPressedStateChange: function(pressed) {
|
||||
RCTUIManager.dispatchViewManagerCommand(
|
||||
React.findNodeHandle(this),
|
||||
RCTUIManager.RCTView.Commands.setPressed,
|
||||
[pressed]
|
||||
);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var childProps = {
|
||||
...onlyChild(this.props.children).props,
|
||||
nativeBackgroundAndroid: this.props.background,
|
||||
accessible: this.props.accessible !== false,
|
||||
accessibilityComponentType: this.props.accessibilityComponentType,
|
||||
accessibilityTraits: this.props.accessibilityTraits,
|
||||
testID: this.props.testID,
|
||||
onLayout: this.props.onLayout,
|
||||
onStartShouldSetResponder: this.touchableHandleStartShouldSetResponder,
|
||||
onResponderTerminationRequest: this.touchableHandleResponderTerminationRequest,
|
||||
onResponderGrant: this.touchableHandleResponderGrant,
|
||||
onResponderMove: this._handleResponderMove,
|
||||
onResponderRelease: this.touchableHandleResponderRelease,
|
||||
onResponderTerminate: this.touchableHandleResponderTerminate,
|
||||
};
|
||||
return <TouchableView {...childProps}/>;
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = TouchableNativeFeedback;
|
||||
Reference in New Issue
Block a user