Authored by chenl

修改了YH_ViewPager为android专用。review by yuliang。

/**
* Description:
*
* Author: Bruce.Lu
* Version: 1.0
* Created on 2017/2/23.
*/
import React from 'react';
import ReactNative from 'react-native';
let {
requireNativeComponent,
View,
} = ReactNative;
var dismissKeyboard = require('dismissKeyboard');
let YH_ViewPagerView = requireNativeComponent('YH_ViewPager', null);
var UIManager = require('UIManager');
type Event = Object;
var VIEWPAGER_REF = 'viewPager';
export type ViewPagerScrollState = $Enum<{
idle: string,
dragging: string,
settling: string,
}>;
export default class YH_ViewPager extends React.Component {
props: {
initialPage?: number,
onPageScroll?: Function,
onPageScrollStateChanged?: Function,
onPageSelected?: Function,
pageMargin?: number,
keyboardDismissMode?: 'none' | 'on-drag',
scrollEnabled?: boolean,
};
static propTypes = {
...View.propTypes,
initialPage: React.PropTypes.number,
onPageScroll: React.PropTypes.func,
onPageScrollStateChanged: React.PropTypes.func,
onPageSelected: React.PropTypes.func,
pageMargin: React.PropTypes.number,
keyboardDismissMode: React.PropTypes.oneOf([
'none', // default
'on-drag',
]),
scrollEnabled: React.PropTypes.bool,
};
constructor(props) {
super(props);
}
componentDidMount() {
if (this.props.initialPage != null) {
this.setPageWithoutAnimation(this.props.initialPage);
}
}
_childrenWithOverridenStyle = (): Array => {
// Override styles so that each page will fill the parent. Native component
// will handle positioning of elements, so it's not important to offset
// them correctly.
return React.Children.map(this.props.children, function(child) {
if (!child) {
return null;
}
var newProps = {
...child.props,
style: [child.props.style, {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
width: undefined,
height: undefined,
}],
collapsable: false,
};
if (child.type &&
child.type.displayName &&
(child.type.displayName !== 'RCTView') &&
(child.type.displayName !== 'View')) {
console.warn('Each ViewPager child must be a <View>. Was ' + child.type.displayName);
}
return React.createElement(child.type, newProps);
});
};
_onPageScroll = (e: Event) => {
if (this.props.onPageScroll) {
this.props.onPageScroll(e);
}
if (this.props.keyboardDismissMode === 'on-drag') {
dismissKeyboard();
}
};
_onPageScrollStateChanged = (e: Event) => {
if (this.props.onPageScrollStateChanged) {
this.props.onPageScrollStateChanged(e.nativeEvent.pageScrollState);
}
};
_onPageSelected = (e: Event) => {
if (this.props.onPageSelected) {
this.props.onPageSelected(e);
}
};
setPage = (selectedPage: number) => {
UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this),
UIManager.AndroidViewPager.Commands.setPage,
[selectedPage],
);
};
setPageWithoutAnimation = (selectedPage: number) => {
UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this),
UIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
[selectedPage],
);
};
render() {
return (<YH_ViewPagerView
{...this.props}
ref={VIEWPAGER_REF}
style={this.props.style}
onPageScroll={this._onPageScroll}
onPageScrollStateChanged={this._onPageScrollStateChanged}
onPageSelected={this._onPageSelected}
children={this._childrenWithOverridenStyle()}
/>);
}
}
... ...
... ... @@ -8,138 +8,15 @@
import React from 'react';
import ReactNative from 'react-native';
let {
requireNativeComponent,
View,
} = ReactNative;
var dismissKeyboard = require('dismissKeyboard');
let YH_ViewPagerView = requireNativeComponent('YH_ViewPager', null);
var UIManager = require('UIManager');
type Event = Object;
var VIEWPAGER_REF = 'viewPager';
export type ViewPagerScrollState = $Enum<{
idle: string,
dragging: string,
settling: string,
}>;
export default class YH_ViewPager extends React.Component {
props: {
initialPage?: number,
onPageScroll?: Function,
onPageScrollStateChanged?: Function,
onPageSelected?: Function,
pageMargin?: number,
keyboardDismissMode?: 'none' | 'on-drag',
scrollEnabled?: boolean,
};
static propTypes = {
...View.propTypes,
initialPage: React.PropTypes.number,
onPageScroll: React.PropTypes.func,
onPageScrollStateChanged: React.PropTypes.func,
onPageSelected: React.PropTypes.func,
pageMargin: React.PropTypes.number,
keyboardDismissMode: React.PropTypes.oneOf([
'none', // default
'on-drag',
]),
scrollEnabled: React.PropTypes.bool,
};
constructor(props) {
super(props);
}
componentDidMount() {
if (this.props.initialPage != null) {
this.setPageWithoutAnimation(this.props.initialPage);
}
}
_childrenWithOverridenStyle = (): Array => {
// Override styles so that each page will fill the parent. Native component
// will handle positioning of elements, so it's not important to offset
// them correctly.
return React.Children.map(this.props.children, function(child) {
if (!child) {
return null;
}
var newProps = {
...child.props,
style: [child.props.style, {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
width: undefined,
height: undefined,
}],
collapsable: false,
};
if (child.type &&
child.type.displayName &&
(child.type.displayName !== 'RCTView') &&
(child.type.displayName !== 'View')) {
console.warn('Each ViewPager child must be a <View>. Was ' + child.type.displayName);
}
return React.createElement(child.type, newProps);
});
};
_onPageScroll = (e: Event) => {
if (this.props.onPageScroll) {
this.props.onPageScroll(e);
}
if (this.props.keyboardDismissMode === 'on-drag') {
dismissKeyboard();
}
};
_onPageScrollStateChanged = (e: Event) => {
if (this.props.onPageScrollStateChanged) {
this.props.onPageScrollStateChanged(e.nativeEvent.pageScrollState);
}
};
_onPageSelected = (e: Event) => {
if (this.props.onPageSelected) {
this.props.onPageSelected(e);
}
};
setPage = (selectedPage: number) => {
UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this),
UIManager.AndroidViewPager.Commands.setPage,
[selectedPage],
);
};
setPageWithoutAnimation = (selectedPage: number) => {
UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this),
UIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
[selectedPage],
);
};
render() {
return (<YH_ViewPagerView
{...this.props}
ref={VIEWPAGER_REF}
style={this.props.style}
onPageScroll={this._onPageScroll}
onPageScrollStateChanged={this._onPageScrollStateChanged}
onPageSelected={this._onPageSelected}
children={this._childrenWithOverridenStyle()}
/>);
return null;
}
}
... ...