139_上传结算界面

component/AloneStudy/settlement/index.js

+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+const {width, height} = Dimensions.get('window');
+class Settlement extends Component {
+  constructor(props) {
+    super(props);
+  }
+  settle() {}
+  render() {
+    const {params} = this.props.route;
+    return (
+      <View style={styles.container}>
+        <View style={styles.s}>
+          <Text style={styles.text}>本次自习结束</Text>
+        </View>
+        <View style={styles.t}>
+          <Text style={styles.text1}>
+            本次你一共学习了{params.data1}分钟
+            {'\n\n'}
+            获得20经验值{'\n\n'}
+            请再接再厉
+          </Text>
+        </View>
+        <View>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={this.settle.bind(this)}>
+            <Text style={styles.text3}>结算</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#C5844A',
+  },
+  text1: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#C5844A',
+  },
+  text3: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#592202',
+  },
+  s: {
+    backgroundColor: '#F4CB8C',
+    width: parseInt(width) / 2.5,
+    height: parseInt(width) / 8,
+    position: 'absolute',
+    top: parseInt(height) / 14,
+    left: parseInt(width) / 3,
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: '#C5844A',
+  },
+  t: {
+    backgroundColor: '#F4CB8C',
+    width: parseInt(width) / 1.5,
+    height: parseInt(width) / 1.2,
+    position: 'absolute',
+    top: parseInt(height) / 4,
+    left: parseInt(width) / 5,
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderRadius: 20,
+    borderColor: '#C5844A',
+  },
+  button: {
+    backgroundColor: '#C5844A',
+    position: 'absolute',
+    top: parseInt(height) / 1.3,
+    left: parseInt(width) / 2.9,
+    justifyContent: 'center',
+    borderRadius: 3,
+    alignItems: 'center',
+    width: parseInt(width) / 2.8,
+    height: parseInt(width) / 7,
+    borderWidth: 3,
+    borderColor: '#BF7636',
+  },
+  button1: {
+    backgroundColor: '#c48c5d',
+    position: 'absolute',
+    top: parseInt(height) / 2,
+    left: parseInt(width) / 3,
+    justifyContent: 'center',
+    borderRadius: 3,
+    width: parseInt(width) / 2.5,
+    height: parseInt(width) / 8,
+  },
+  prompt: {
+    position: 'absolute',
+    top: parseInt(height) / 1.3,
+    left: parseInt(width) / 3,
+    justifyContent: 'center',
+    borderRadius: 3,
+    width: parseInt(width) / 2.5,
+    height: parseInt(width) / 8,
+  },
+  showTime: {
+    height: 100,
+    position: 'absolute',
+    top: parseInt(height) / 6,
+    left: parseInt(width) / 2.6,
+    alignItems: 'center',
+  },
+  timeText: {
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#592202',
+    fontSize: 40,
+  },
+  icon1: {
+    position: 'absolute',
+    top: parseInt(height) / 3,
+    left: parseInt(width) / 3,
+    opacity: 0.5,
+    width: parseInt(width) / 2.8,
+    height: parseInt(width) / 2.8,
+  },
+  radio: {
+    position: 'absolute',
+    top: parseInt(height) / 1.8,
+    left: parseInt(width) / 3,
+  },
+});
+
+export default Settlement;