139_限额界面

component/AloneStudy/quota/index.js

+import React, {Component} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Dimensions,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+const {width, height} = Dimensions.get('window');
+import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button';
+class Quota extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: 0,
+      data1: 0,
+      displayName: null,
+      tDisplay: 'none',
+      jDisplay: 'none',
+    };
+    this.s = 50;
+    this.f = 0;
+    this._timer = null;
+  }
+  countTime() {
+    this._timer = setInterval(() => {
+      this.setState({
+        data: this.s++,
+        data1: this.f,
+        displayName: 'none',
+        tDisplay: null,
+      });
+      if (this.state.data == 59) {
+        this.f++;
+        this.s = 0;
+      }
+    }, 1000);
+  }
+  stop() {
+    this.setState({data: 0, data1: 0, tDisplay: 'none', jDisplay: null});
+    this._timer && clearInterval(this._timer);
+  }
+  settle() {
+    this.props.navigation.navigate('单机模式结算', {data1: this.state.data1});
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={styles.showTime}>
+          <Text style={styles.timeText}>
+            {this.state.data1} : {this.state.data}
+          </Text>
+        </View>
+        <View>
+          <Image style={styles.icon1} source={require('../img/xiane.png')} />
+        </View>
+        <View style={{display: this.state.displayName}}>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={this.countTime.bind(this)}>
+            <Text style={styles.text}>开始</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={{display: this.state.tDisplay}}>
+          <TouchableOpacity
+            style={styles.prompt}
+            onPress={this.stop.bind(this)}>
+            <Text style={styles.text1}>结束</Text>
+          </TouchableOpacity>
+        </View>
+        <View>
+          <TouchableOpacity style={styles.button1} onPress={this.ZChang}>
+            <Text style={styles.text}>白名单</Text>
+          </TouchableOpacity>
+        </View>
+        <View style={{display: this.state.jDisplay}}>
+          <TouchableOpacity
+            style={styles.settle}
+            onPress={this.settle.bind(this)}>
+            <Text style={styles.text}>结算</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    flex: 1,
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#592202',
+  },
+  text1: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#592202',
+  },
+  button: {
+    backgroundColor: '#c48c5d',
+    position: 'absolute',
+    top: parseInt(height) / 1.3,
+    left: parseInt(width) / 3,
+    justifyContent: 'center',
+    borderRadius: 3,
+    alignItems: 'center',
+    width: parseInt(width) / 2.2,
+    height: parseInt(width) / 8,
+  },
+  button1: {
+    backgroundColor: '#c48c5d',
+    position: 'absolute',
+    top: parseInt(height) / 1.7,
+    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,
+  },
+  settle: {
+    backgroundColor: '#c48c5d',
+    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 Quota;