|
|
@@ -0,0 +1,166 @@
|
|
|
+/**
|
|
|
+ * 设置页面
|
|
|
+ * @邠心vbe on 2022/12/9
|
|
|
+ */
|
|
|
+import React, { Component } from 'react';
|
|
|
+import { View, Text, StyleSheet, Switch } from 'react-native';
|
|
|
+import { Value } from 'react-native-reanimated';
|
|
|
+import Button from '../components/Button';
|
|
|
+import Dropdown from '../components/Dropdown';
|
|
|
+import storage from '../utils/storage';
|
|
|
+
|
|
|
+export const SETTINGS_KEY = 'CHARGE_SETTINGS'
|
|
|
+export const SettingUtil = {
|
|
|
+ getSettings: (back) => {
|
|
|
+ if (!global.settingsInfo) {
|
|
|
+ storage.getStorage(SETTINGS_KEY).then(sto => {
|
|
|
+ if (sto) {
|
|
|
+ const res = JSON.parse(sto);
|
|
|
+ global.settingsInfo = res;
|
|
|
+ back(global.settingsInfo)
|
|
|
+ } else {
|
|
|
+ back({
|
|
|
+ alwaysLocation: true,
|
|
|
+ refreshInterval: 10
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ back(global.settingsInfo)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default class Settings extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ settings: {
|
|
|
+ alwaysLocation: true,
|
|
|
+ refreshInterval: 10
|
|
|
+ },
|
|
|
+ intervalList: [10, 15, 20, 30, 60, 90, 120]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ componentDidMount() {
|
|
|
+ this.props.navigation.addListener('blur', () => {
|
|
|
+ //console.log("保存设置");
|
|
|
+ global.settingsInfo = this.state.settings
|
|
|
+ storage.setStorageJson(SETTINGS_KEY, this.state.settings)
|
|
|
+ });
|
|
|
+ SettingUtil.getSettings(res => {
|
|
|
+ const info = this.state.settings;
|
|
|
+ for (let item in info) {
|
|
|
+ if (res[item] !== undefined) {
|
|
|
+ info[item] = res[item]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.setState({
|
|
|
+ settings: info
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ changeSwitch(key, value) {
|
|
|
+ this.state.settings[key] = value
|
|
|
+ //console.log('changeSwitch', item);
|
|
|
+ this.setState({
|
|
|
+ settings: this.state.settings
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ changeSettings(key, value) {
|
|
|
+ this.state.settings[key] = value
|
|
|
+ this.setState({
|
|
|
+ settings: this.state.settings
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <View style={ui.flex1}>
|
|
|
+ <Text style={styles.title}>Maps</Text>
|
|
|
+ <Button
|
|
|
+ style={styles.itemButton}
|
|
|
+ viewStyle={styles.itemView}
|
|
|
+ onClick={() => this.changeSwitch('alwaysLocation', !this.state.settings.alwaysLocation)}>
|
|
|
+ <Text style={styles.buttonText}>Always show my locations</Text>
|
|
|
+ <Switch
|
|
|
+ value={this.state.settings.alwaysLocation}
|
|
|
+ trackColor={isIOS ? { false: "#B2B2B2", true: colorAccent } : null}
|
|
|
+ onValueChange={v => {
|
|
|
+ this.changeSwitch('alwaysLocation', v);
|
|
|
+ }}/>
|
|
|
+ </Button>
|
|
|
+ <View style={{height: 56}}>
|
|
|
+ <View style={styles.dropdownView}>
|
|
|
+ <Text style={styles.buttonText}>Auto refresh interval</Text>
|
|
|
+ <Text style={styles.settingText}>{this.state.settings.refreshInterval}s</Text>
|
|
|
+ </View>
|
|
|
+ <Dropdown
|
|
|
+ style={styles.hideItem}
|
|
|
+ list={this.state.intervalList}
|
|
|
+ title="Refresh interval"
|
|
|
+ suffixList="s"
|
|
|
+ value={this.state.settings.refreshInterval}
|
|
|
+ rippleStyle={ripple}
|
|
|
+ onChange={v => this.changeSettings("refreshInterval", v)}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const styles = StyleSheet.create({
|
|
|
+ title: {
|
|
|
+ color: '#888',
|
|
|
+ fontSize: 12,
|
|
|
+ ...$padding(8, 16, 4),
|
|
|
+ backgroundColor: 'white'
|
|
|
+ },
|
|
|
+ itemButton: {
|
|
|
+ borderRadius: 0,
|
|
|
+ backgroundColor: 'white'
|
|
|
+ },
|
|
|
+ itemView: {
|
|
|
+ flex: 1,
|
|
|
+ height: 56,
|
|
|
+ paddingLeft: 16,
|
|
|
+ paddingRight: 16,
|
|
|
+ alignItems: 'center',
|
|
|
+ flexDirection: 'row'
|
|
|
+ },
|
|
|
+ buttonText: {
|
|
|
+ flex: 1,
|
|
|
+ color: '#333',
|
|
|
+ fontSize: 16
|
|
|
+ },
|
|
|
+ settingText: {
|
|
|
+ color: '#666',
|
|
|
+ fontSize: 15
|
|
|
+ },
|
|
|
+ dropdownView: {
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ height: 56,
|
|
|
+ paddingLeft: 16,
|
|
|
+ paddingRight: 16,
|
|
|
+ position: 'absolute',
|
|
|
+ alignItems: 'center',
|
|
|
+ flexDirection: 'row',
|
|
|
+ backgroundColor: 'white'
|
|
|
+ },
|
|
|
+ hideItem: {
|
|
|
+ flex: 1,
|
|
|
+ height: 56,
|
|
|
+ opacity: 0,
|
|
|
+ paddingLeft: 16,
|
|
|
+ paddingRight: 16,
|
|
|
+ alignItems: 'center',
|
|
|
+ flexDirection: 'row'
|
|
|
+ }
|
|
|
+})
|