在连续单击三到四次后，panResponder调用消失的动画视图。显示的数据是动态的，并且会调用api，并且已根据数据的大小计算了高度和宽度。
从“反应”中导入React，{组件}； 导入{ 视图， 文本， 尺寸 ScrollView， 列表显示， TextInput， 图片， TouchableOpacity， TouchableHighlight， LayoutAnimation， UIManager， 平台， PanResponder， 动画的 ToastAndroid }来自“ react-native”； 从“ ./PreLoader”导入PreLoader； 从“ ./NoData”导入Nodata； 从“ ./Backbutton”导入Backbutton； 从“ ./Downarrow”导入Downarrow； 从“ ./Uparrow”导入Uparrow； 从“ ../styles/SpreadsheetData”中导入样式；
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as Actions from "../actions/spreadsheetDataAction";
let deviceWidth = Dimensions.get("window").width;
let deviceHeight = Dimensions.get("window").height;
const chunk = 15;
class SpreadsheetData extends Component {
static defaultProps = {
doAnimateZoomReset: false,
maximumZoomScale: 2,
minimumZoomScale: 1,
zoomHeight: deviceHeight,
zoomWidth: deviceWidth
};
constructor(props) {
super(props);
if (Platform.OS === "android") {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
this.state = {
list: [],
data: [],
loadedRecordIndex: 0,
isLoading: true,
textLayoutHeight: 0,
updatedHeight: 0,
expand: false,
OrientationStatus: "",
Height_Layout: "",
Width_Layout: "",
scroll: true,
pan: new Animated.ValueXY(0, 0),
scrollX: new Animated.ValueXY(),
scale: new Animated.Value(1)
};
this.handleBack = this.handleBack.bind(this);
this.expand_collapse_Function = this.expand_collapse_Function.bind(
this
);
this.handleload = this.handleload.bind(this);
this.widthX = 0;
this.heightY = 0;
this.count = 0;
this.refereshList = this.refereshList.bind(this);
// this.xMin = 100;
// this.yMin = 100;
}
componentWillMount() {
this.animatedValue = new Animated.Value();
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderGrant: (e, gestureState) => {
this.state.pan.setOffset({
x: this.state.pan.x._value,
y: this.state.pan.y._value
});
this.xMin = this.state.pan.x._value;
this.yMin = this.state.pan.y._value;
},
onPanResponderRelease: (e, { vx, vy }) => {
// Flatten the offset to avoid erratic behavior
this.state.pan.flattenOffset();
},
onPanResponderMove: (e, gestureState) => {
let isXtrue0 = !(
this.xMin + gestureState.dx <=
this.state.Width_Layout - this.widthX &&
gestureState.dx < 0
);
let isXtrue1 = !(
this.xMin + gestureState.dx >= 0 && gestureState.dx > 0
);
let isYtrue0 = !(
this.yMin + gestureState.dy >= 0 && gestureState.dy > 0
);
let isYtrue1 = !(
this.yMin + gestureState.dy <=
this.state.Height_Layout - this.heightY &&
gestureState.dy < 0
);
let isLoad =
this.yMin + gestureState.dy <=
this.state.Height_Layout - this.heightY;
if (isXtrue1 && isXtrue0 && isYtrue1 && isYtrue0) {
Animated.event([
null,
{
dx: this.state.pan.x,
dy: this.state.pan.y
}
])(e, gestureState);
} else if (isXtrue1 && isXtrue0) {
gestureState = { ...gestureState, dy: 0 };
Animated.event([
null,
{ dx: this.state.pan.x, dy: this.state.pan.y }
])(e, gestureState);
} else if (isYtrue1 && isYtrue0) {
gestureState = { ...gestureState, dx: 0 };
Animated.event([
null,
{ dx: this.state.pan.x, dy: this.state.pan.y }
])(e, gestureState);
} else if (isLoad) {
this.setPagination();
}
if (
!isYtrue1 &&
this.state.list.length == this.state.data.length
) {
this.refereshList();
}
}
});
}
componentDidMount() {
this.DetectOrientation();
this.props.getSpreadsheetData();
}
componentWillReceiveProps(nextProps) {
this.widthX = nextProps.layout ? nextProps.layout.length * 108 : 0;
if (this.props.list !== nextProps.list) {
this.setState(
{
list: nextProps.list
},
() => {
this.setPagination();
}
);
}
}
setPagination() {
let extraheight = 200;
let data = this.state.list;
let dataHeight =
this.state.data.length * 60 -
1.5 * this.state.Height_Layout +
this.state.updatedHeight;
let currentData = this.state.data;
chunk = chunk + currentData.length;
if (data) {
currentData = data.slice(this.state.loadedRecordIndex, chunk);
this.setState(
{
data: currentData
},
() => this.cutExtra()
);
}
}
refereshList() {
this.count += 1;
if (this.count == 1) {
ToastAndroid.show("No more data", ToastAndroid.SHORT);
}
}
cutExtra() {
if (this.state.data.length >= 120) {
this.heightY = this.state.data
? this.state.data.length * 60 - 1.5 * this.state.Height_Layout
: 0;
} else {
this.heightY = this.state.data
? this.state.data.length * 60 + 50 + this.state.updatedHeight
: 0;
}
}
handleBack() {
this.props.navigation.goBack();
this.props.resetAction();
}
expand_collapse_Function() {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
if (this.state.expand == false) {
this.setState({
updatedHeight: 50,
expand: true
});
} else {
this.setState({
updatedHeight: 0,
expand: false
});
}
}
getHeight(height) {
this.setState({ textLayoutHeight: height });
}
DetectOrientation() {
if (this.state.Width_Layout > this.state.Height_Layout) {
this.setState({
OrientationStatus: "Landscape Mode"
});
} else {
this.setState({
OrientationStatus: "Portrait Mode"
});
}
}
handleload() {
this.setPagination();
}
render() {
const styles = Styles;
const extra = this.state.data.length >= 60;
if (this.state.data.length >= 30) {
this.heightY = this.state.data
? this.state.data.length * 60 - 200 + this.state.updatedHeight
: 0;
} else {
this.heightY = this.state.data
? this.state.data.length * 60 + 50 + this.state.updatedHeight
: 0;
}
const panStyle = {
left: this.state.pan.x,
top: this.state.pan.y,
width: this.widthX,
position: "absolute"
};
return (
<View
style={[styles.container]}
onLayout={event =>
this.setState(
{
Width_Layout: event.nativeEvent.layout.width,
Height_Layout: event.nativeEvent.layout.height
},
() => this.DetectOrientation()
)
}
>
<View style={{ backgroundColor: "white", zIndex: 2 }}>
<View
style={[
styles.title,
{ justifyContent: "space-between" }
]}
>
<View
style={[
styles.title,
{
marginTop: 0,
width: "85%"
}
]}
>
<TouchableOpacity
style={{ padding: 10 }}
onPress={this.handleBack}
>
<Backbutton />
</TouchableOpacity>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
>
<Text
style={[
styles.text,
styles.titleText,
{
top: 8,
paddingHorizontal: 6
}
]}
>
{this.props.title}
</Text>
</ScrollView>
</View>
<View>
<TouchableOpacity
onPress={this.expand_collapse_Function}
style={{
marginTop: 5,
padding: 10
}}
>
{this.state.expand ? (
<Uparrow />
) : (
<Downarrow />
)}
</TouchableOpacity>
</View>
</View>
</View>
{this.state.expand ? (
<View style={styles.expandBox}>
<View style={styles.exportBox}>
<Image
style={[styles.buttonImage, styles.imageText]}
source={require("./../icons/export.png")}
/>
<Text style={styles.imageText}>Export</Text>
</View>
</View>
) : null}
{this.props.isLoading ? (
<View style={styles.flex}>
<PreLoader />
</View>
) : (
<View style={{ flex: 1 }}>
<View
style={{
flex:
this.state.OrientationStatus ===
"Landscape Mode"
? 0.2
: 0.1,
zIndex: 2,
backgroundColor: "#FFFFFF"
}}
>
<Animated.View
style={{
position: "absolute",
top: 0,
left: this.state.pan.x
}}
>
{this.props.layout ? (
<View style={styles.flex}>
<View style={styles.header}>
{this.props.layout.map(
(item, i) => {
return (
<View
style={[
styles.group,
{
backgroundColor:
"#1464c7"
}
]}
key={i}
>
<Text
style={[
styles.fontWeight,
styles.titleText
]}
>
{item.name}
</Text>
</View>
);
}
)}
</View>
</View>
) : (
<View style={{ flex: 1 }}>
<Nodata />
</View>
)}
</Animated.View>
</View>
<View
style={{
flex:
this.state.OrientationStatus ===
"Landscape Mode"
? 0.7
: 0.8
}}
>
<Animated.View
{...this._panResponder.panHandlers}
style={[panStyle]}
>
{this.state.data
? this.state.data.map((item, i) => {
return (
<View
style={[styles.flexRow]}
key={i}
>
{item.map((value, key) => {
return (
<View
style={[
styles.group,
{
borderWidth: 1
},
{
borderColor:
"grey"
}
]}
key={key}
>
{value ? (
<Text>
{value}
</Text>
) : (
<Text>
0
</Text>
)}
</View>
);
})}
</View>
);
})
: null}
<View
style={{
flex: 1,
justifyContent: "center"
}}
>
{this.props.list.length ==
this.state.data.length ? (
<View
style={{
backgroundColor: "#1464c7",
height: 30
}}
>
<Text
style={{
color: "#FFFFFF",
left:
this.state
.Width_Layout /
2 -
20
}}
>
No more data
</Text>
</View>
) : (
<PreLoader />
)}
</View>
</Animated.View>
</View>
</View>
)}
</View>
);
}
}
function mapStateToProps(state, props) {
return {
title: state.SpreadsheetDataReducer.title,
layout: state.SpreadsheetDataReducer.layout,
list: state.SpreadsheetDataReducer.list,
isLoading: state.SpreadsheetDataReducer.isLoading
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(Actions, dispatch);
}
export default connect(mapStateToProps, { ...Actions })(SpreadsheetData);