@NovichokIvanovich
начинающий программист

Как сохранить State экрана чтобы он не обнулялся до дефолтного значения при переходе в другой экран и обратно?

Есть в нем две кнопки по нажатию на которые меняется State который должен сохраниться при переходе на другой экран и обратно.
import React from 'react';
import { Text, View, TouchableOpacity, Platform } from 'react-native';
import { DrawerActions } from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/FontAwesome5';
import AwesomeAlert from 'react-native-awesome-alerts';
import { connect } from 'react-redux';
import { Audio } from 'expo-av';
import { SQLite } from 'expo-sqlite';
import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import * as TaskManager from 'expo-task-manager';

import styles from '../../styles';

const db = SQLite.openDatabase("db.db");

let Stations = {};
let prevStation = null;
findStation = (locations) => {  
    let lat = locations[locations.length-1].coords.latitude;
    let lon = locations[locations.length-1].coords.longitude;
    for (i = 0; i < Stations.stations.length; i++) {
        let radius = Stations.stations[i].radius;
        let latStation = Stations.stations[i].latitude;
        let lonStation = Stations.stations[i].longitude;
        let r = Math.sqrt((lat - latStation) * (lat - latStation) + (lon - lonStation) * (lon - lonStation)); //Теорема пифагора
        if (radius > r.toFixed(6)) {
            this.read(Stations.id, Stations.stations[i].id);
            break;
        }
    }
}
//Озвучка
play = async (x) => {
    if (prevStation != x) {
        prevStation = x;
        const soundObject = new Audio.Sound();
        try {
            await soundObject.loadAsync({ uri: x });
            await soundObject.playAsync();
            // Your sound is playing!
        } catch (error) {
            // An error occurred!
        }
    }
}
read = (route, station) => {
    let o = `${route}${station}`;
    db.transaction(tx => {
        tx.executeSql(
            `select soundLink from station where stationId like ${o}`, //прогрывается файл из бд по Номер направления+Айди остановки
            [],
            (_, { rows }) => play(rows._array[0].soundLink));
    }, error => { console.log(error) }
    )
}

class MyIdRouteScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: false,
            way: false,
            number: 0,
            route: {},
            wayStations: {},
        }
    }
    static navigationOptions = ({ navigation } ) => {
        let number = '';
        if(navigation.state.params != undefined) {
            number=navigation.state.params.number;
        }
        return {
            title: `Маршрут №${number}`,
            headerLeft: <Icon
                name="angle-left"
                color="#FFF"
                size={30}
                style={{ marginLeft: 20 }}
                onPress={() => navigation.navigate('MyRoute')} />
        };
    };
    tracking = async () => {
        const { myWays } = this.props;
        const { way } = this.state;
        this.setState({ active: true });
    }
    way = () => {
        this.setState({ way: !this.state.way })
    }
    stop = () => {
        this.setState({ active: false });
    }
    render() {
        const { active, way, route } = this.state;
        
        return (
            <View style={styles.track}>
                <Text>{way ? route.ways[1].name : route.ways[0].name}</Text>
                <TouchableOpacity style={active ? styles.trackButton2 : styles.trackButton1} onPress={ active ? this.stop : this.tracking }>
                    {active ? <Text style={styles.trackButtonText}>Остановить</Text> : <Text style={styles.trackButtonText}>Начать</Text>}
                </TouchableOpacity>

                <TouchableOpacity style={way ? styles.trackButton2 : styles.trackButton1} onPress={this.way}>
                    {way ? <Text style={styles.trackButtonText}>Сменить направление</Text> : <Text style={styles.trackButtonText}>Сменить направление</Text>}
                </TouchableOpacity>
            </View>
        )
    }
};
export default connect(mapStateToProps)(MyIdRouteScreen);
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
вам нужно где то хранить данные и у вас 2 варианта: Redux или AsyncStore. Если приложение не большое 2-3 экрана то можно выкрутиться и с AsyncStore.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы