|
...
|
...
|
@@ -10,6 +10,8 @@ import ReactNative, { |
|
|
|
Dimensions,
|
|
|
|
TouchableOpacity,
|
|
|
|
Alert,
|
|
|
|
Platform,
|
|
|
|
Keyboard,
|
|
|
|
} from 'react-native';
|
|
|
|
|
|
|
|
import Immutable, {Map} from 'immutable';
|
|
...
|
...
|
@@ -20,19 +22,79 @@ import SlicedImage from '../../../common/components/SlicedImage'; |
|
|
|
export default class Open extends React.Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
this.contentHeight = 0;
|
|
|
|
this.textInputViewIndex = null;//当前编辑的textInput
|
|
|
|
this.moveH = 0;//ScrollView滑动的距离
|
|
|
|
this.lastMoveH = 0;//保留上次滑动的距离
|
|
|
|
this.needMove = false;//弹出键盘时，textInputView是否需要滑动
|
|
|
|
|
|
|
|
this._renderRow = this._renderRow.bind(this);
|
|
|
|
this._renderHeader=this._renderHeader.bind(this);
|
|
|
|
this._renderFooter=this._renderFooter.bind(this);
|
|
|
|
this._onFocus = this._onFocus.bind(this);
|
|
|
|
this.dataSource = new ListView.DataSource({
|
|
|
|
rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
_onFocus(index) {
|
|
|
|
let {bankInfo,bankCellIndex} = this.props.openPageInfo;
|
|
|
|
if (!bankInfo) {
|
|
|
|
if (index > bankCellIndex) {
|
|
|
|
index = index - 1;
|
|
|
|
}
|
|
|
|
}else {
|
|
|
|
if (!bankInfo.get('show') && index > bankCellIndex) {
|
|
|
|
index = index - 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.textInputViewIndex = index;
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount(){
|
|
|
|
if (Platform.OS === 'ios') {
|
|
|
|
this.subscriptions = [
|
|
|
|
Keyboard.addListener('keyboardDidShow', this._keyboardDidShow),
|
|
|
|
Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
|
|
|
|
];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
componentWillUnmount(){
|
|
|
|
if (Platform.OS === 'ios') {
|
|
|
|
this.subscriptions.forEach((sub) => sub.remove());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_keyboardDidShow = (e) => {
|
|
|
|
if(! this.textInputViewIndex) return ;
|
|
|
|
this.needMove = false;
|
|
|
|
|
|
|
|
let leftHeight = height - (64 + 56 + this.textInputViewIndex * 44.5) * DEVICE_WIDTH_RATIO;//输入框距离底部的距离 = （屏幕的高度 - 当前TextInput的高度）
|
|
|
|
//输入框距离底部的距离小于键盘的高度，需要滑动
|
|
|
|
if( leftHeight < e.startCoordinates.height + 25 ){
|
|
|
|
this.needMove = true;
|
|
|
|
// 需要移动的距离
|
|
|
|
let moveHeight = 50 + (e.startCoordinates.height - leftHeight);
|
|
|
|
console.log("this.moveH=" + this.moveH,"this.contentHeight=" + this.contentHeight,"height=" + height);
|
|
|
|
|
|
|
|
this.lastMoveH = this.moveH;
|
|
|
|
this.refs.scroll.scrollTo({y:this.moveH + moveHeight ,x:0});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
_keyboardDidHide = () => {
|
|
|
|
if(this.needMove){
|
|
|
|
this.refs.scroll.scrollTo({y:this.lastMoveH ,x:0});
|
|
|
|
}
|
|
|
|
this.textInputViewIndex = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
_renderRow(rowData, sectionID, rowID, highlightRow) {
|
|
|
|
let {bankInfo} = this.props.openPageInfo;
|
|
|
|
if (!rowData) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
let rowKey = 'row' + rowID;
|
|
|
|
if (rowData.get('inputKey') == 'BankIcon') {
|
|
|
|
if (bankInfo) {
|
|
|
|
bankInfo = bankInfo.toJS();
|
|
...
|
...
|
@@ -66,12 +128,14 @@ export default class Open extends React.Component { |
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<OpenPageInputCell
|
|
|
|
ref={rowKey}
|
|
|
|
refId={rowID}
|
|
|
|
cellParams={rowData}
|
|
|
|
snsCheckCodeEnable={this.props.openPageInfo.snsCheckCodeEnable}
|
|
|
|
snsCheckCodeText={this.props.openPageInfo.snsCheckCodeText}
|
|
|
|
onPressCardNoQuestion={this.props.onPressCardNoQuestion}
|
|
|
|
updateOpenPageCellInfo={this.props.updateOpenPageCellInfo}
|
|
|
|
onPressCheckCode={this.props.onPressCheckCode}
|
|
|
|
onFocus={this._onFocus}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
...
|
...
|
@@ -117,8 +181,8 @@ export default class Open extends React.Component { |
|
|
|
|
|
|
|
<View style={styles.nextContainer}>
|
|
|
|
<Text style={{color:'#b0b0b0',fontSize:10*DEVICE_WIDTH_RATIO}}>数据智能加密，保障您的用卡安全</Text>
|
|
|
|
<TouchableOpacity onPress={() => {this.props.onPressOpenNext && this.props.onPressOpenNext()}} >
|
|
|
|
<Text style={[styles.next,{backgroundColor:nextBtnColor}]}>{nextBtnText}</Text>
|
|
|
|
<TouchableOpacity style={[styles.nextTouchableOpacity,{backgroundColor:nextBtnColor}]} onPress={() => {this.props.onPressOpenNext && this.props.onPressOpenNext()}} >
|
|
|
|
<Text style={[styles.next]}>{nextBtnText}</Text>
|
|
|
|
</TouchableOpacity>
|
|
|
|
<Text style={{color:'#444444',fontSize:10*DEVICE_WIDTH_RATIO}}>Yoho!Buy有货及信而富联合提供</Text>
|
|
|
|
</View>
|
|
...
|
...
|
@@ -144,12 +208,16 @@ export default class Open extends React.Component { |
|
|
|
return(
|
|
|
|
<View style={styles.container}>
|
|
|
|
<ListView
|
|
|
|
ref='scroll'
|
|
|
|
contentContainerStyle={styles.contentContainer}
|
|
|
|
enableEmptySections={true}
|
|
|
|
dataSource={this.dataSource.cloneWithRows(cellList)}
|
|
|
|
renderRow={this._renderRow}
|
|
|
|
renderHeader={this._renderHeader}
|
|
|
|
renderFooter={this._renderFooter}
|
|
|
|
onContentSizeChange ={(contentWidth, contentHeight)=>{
|
|
|
|
this.contentHeight = parseInt(contentHeight);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
{tipMessage !== '' ? <Prompt
|
|
|
|
text={tipMessage}
|
|
...
|
...
|
@@ -212,16 +280,22 @@ let styles = StyleSheet.create({ |
|
|
|
alignItems: 'center',
|
|
|
|
marginTop: 60 * DEVICE_WIDTH_RATIO,
|
|
|
|
},
|
|
|
|
next: {
|
|
|
|
nextTouchableOpacity: {
|
|
|
|
width: 236 * DEVICE_WIDTH_RATIO,
|
|
|
|
height: 44 * DEVICE_WIDTH_RATIO,
|
|
|
|
marginTop: 8 * DEVICE_WIDTH_RATIO,
|
|
|
|
marginBottom: 30 * DEVICE_WIDTH_RATIO,
|
|
|
|
backgroundColor: '#b0b0b0',
|
|
|
|
borderRadius: 5 * DEVICE_WIDTH_RATIO,
|
|
|
|
backgroundColor: '#444444',
|
|
|
|
},
|
|
|
|
next: {
|
|
|
|
width: 236 * DEVICE_WIDTH_RATIO,
|
|
|
|
height: 44 * DEVICE_WIDTH_RATIO,
|
|
|
|
textAlign: 'center',
|
|
|
|
color: 'white',
|
|
|
|
fontSize: 14 * DEVICE_WIDTH_RATIO,
|
|
|
|
lineHeight: 26 * DEVICE_WIDTH_RATIO,
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
},
|
|
|
|
bankCellContainer: {
|
|
|
|
width: width,
|
...
|
...
|
|
