访问屏幕时重新加载的应用程序

Question

我正在尝试了解我的应用程序上屏幕的行为。我创建了一个“设置”屏幕，以便能够管理应用程序上使用的语言、放置条款并建议断开应用程序的连接。 当我进入这个屏幕时，它会显示几秒钟，然后应用程序完全重新加载，我回到主屏幕，此时，设置页面可以访问和使用。

我完全不明白。第一个显示：重新加载应用程序，第二个显示：可用和功能屏幕......

你能帮我理解一下，看看我的错误吗？ 谢谢你的帮助。 这是有问题的设置屏幕：

import React from "react";
import {
  Text,
  View,
  ScrollView,
  TouchableOpacity,
} from "react-native";
import styles from '../../assets/styles';
import i18n from '../../src/i18n';
import {
  storeAppLang,
  retrieveAppLang,
  cleanUserSession,
  getDeviceType,
  userSessionActive
} from "../../src/common/Preferences";
import { List } from 'react-native-paper';
import Modal from "react-native-simple-modal";
import { Dropdown as MaterialDropdown } from "react-native-material-dropdown-v2";
import AccountInfo from "../../Screens/Account/AccountInfo";


const list = [
  {
    title: i18n.t("settings.action.languages"),
    action: "languages",
  },
  {
    title: i18n.t("about.title"),
    action: "about",
  },
  {
    title: i18n.t("settings.action.terms"),
    action: "terms",
  },
  {
    title: i18n.t("settings.action.disconnect"),
    action: "disconnect",
  },
];

export default class Settings extends React.Component {
  constructor() {
    super();
    this.state = {
      activeSwitch: null,
      modalLang_open: false,
      modalLang_offset: 0,
      lang: "en",
      deviceType: null,
      nb_autoredirection: 0,
      makeDisconnection: null
    };
  }
  modalDidOpen = (key) => {
    //console.log("Modal did close.");
  };

  modalDidClose = (key) => {
    this.setState({ [key]: false });
    //console.log("Modal did close.");
  };

  resetPosition = () =>
    this.setState({
      modalLang_offset: 0,
    });

  openModal = (key, offset) => this.setState({ [key]: true, [offset]: -200 });

  closeModal = (key) => this.setState({ [key]: false });

  toggleSwitch = (switchNumber) => {
    this.setState({
      activeSwitch:
        switchNumber === this.state.activeSwitch ? null : switchNumber,
    });
  };

  getCurrentData = async () => {
    let lang = await retrieveAppLang();
    let deviceType = await getDeviceType();

    if (lang) {
      this.setState({
        lang: lang,
        deviceType: deviceType
      });

    }
  };

  execAction = (val) => {
    switch (val) {  
      case "languages":
        this.openModal("modalLang_open", "modalLang_offset");
        break;
      case "lang_fr":
        storeAppLang("fr");
        i18n.changeLanguage("fr");
        this.setState({ lang: "fr" });
        this.setState({ modalLang_open: false });
        this.props.navigation.navigate("BottomTabNavigator", { lang: "fr" });
        break;
      case "lang_en":
        storeAppLang("en");
        i18n.changeLanguage("en");
        this.setState({ lang: "en" });
        this.setState({ modalLang_open: false });
        this.props.navigation.navigate("BottomTabNavigator", { lang: "en" });
        break;
      case "terms":
        this.props.navigation.navigate("Terms");
        break;
        case "about":
        this.props.navigation.navigate("About");
        break;
      case "assist":
        this.props.navigation.navigate("Contact");
        break;
      case "disconnect":
        this.setState({ makeDisconnection: true });
        cleanUserSession(this.props.navigation);
        break;
      default:
        //Alert.alert("[" + val + "] No action defined...");
    }
  };

  switch = (value) => {
    this.toggleSwitch(1);
  };

  async componentDidMount() {
    // Security : prevent access to this screen if disconnected
    this.props.navigation.addListener("didFocus", async (payload) => {
      if (this.state.makeDisconnection === true) {
        let alreadyConnected = await userSessionActive();

        if (alreadyConnected === true) {
          if (this.state.nb_autoredirection == 0) {
            this.setState({
              nb_autoredirection: 1,
            });
            this.props.navigation.navigate("BottomTabNavigator");
          }
        } else {
          this.props.navigation.navigate("Authentication", {disconnect: true});
        }
      }
    });
  }

  UNSAFE_componentWillMount() {
    this.getCurrentData();
  }

  render() {
    const lang = retrieveAppLang();
    const placeholder = {
      label: i18n.t("settings.action.set"),
      value: null,
      color: "#212121",
    };

    let data_lang = [
      { label: i18n.t("settings.action.langfr"), value: "lang_fr" },
      { label: i18n.t("settings.action.langen"), value: "lang_en" },
    ];

    return (
      <ScrollView contentContainerStyle={{flexGrow: 1, justifyContent: 'center' }}>
        <View>
          {list !== null && list.length > 0 ? (
            list.map((item, i) => (
            <List.Section title={item.title} titleStyle={{fontSize: 16, color: '#F78400'}} key={i.toString()}>
              <List.Accordion
                title={item.action}
                style={{width: '98%'}}
                onPress={() => {
                  this.execAction(item.action);
                }}
                left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../assets/images/logo-weecoop.png')} />}
                >
            </List.Accordion>
          </List.Section>
          ))
      ) : (
        <View style={styles.container}>
            <Text>{"\n\n" + (list === null ? i18n.t("orders.search") : i18n.t("orders.nodata")) + "\n\n\n"}</Text>
            <Button
              color="#F78400"
              title= 'Back'
              onPress={() => this.props.navigation.goBack()}>BACK
            </Button>
          </View>
      )}
        </View>
        {/*<TouchableOpacity onPress={this.openModal}>
          <Text style={styles.h4}>{i18n.t("settings.action.set")}</Text>
        </TouchableOpacity>*/}
        <Modal
          offset={this.state.modalLang_offset}
          open={this.state.modalLang_open}
          modalDidOpen={() => this.modalDidOpen("modalLang_open")}
          modalDidClose={() => this.modalDidClose("modalLang_open")}
          modalStyle={styles.modalStyle}
          style={{ alignItems: "center", zIndex: 100 }}
          useNativeDriver= {true}
        >
          <View style={{ alignItems: "center" }}>
            <MaterialDropdown
              label={i18n.t("settings.action.languages")}
              data={data_lang}
              value = {this.state.lang}
              baseColor="#212121"
              labelFontSize={18}
              textColor="#212121"
              itemColor="#212121"
              selectedItemColor="#000"
              backgroundColor="transparent"
              pickerStyle={styles.dropdownPickerStyle}
              containerStyle={styles.dropdownContainerStyle}
              itemCount={2}
              dropdownPosition={-5.5}
              labelExtractor={({ label }) => label}
              valueExtractor={({ value }) => value}
              propsExtractor={({ props }, index) => props}
              onChangeText={(value) => this.execAction(value)}
              useNativeDriver= {true}
            />
            <Text>{"\n"}</Text>
            <View style={styles.buttonView2}>
              <TouchableOpacity
                style={styles.touchable2}
                onPress={() => this.closeModal("modalLang_open")}
              >
                <View>
                  <Text>
                    {i18n.t("settings.action.disconnect")}
                  </Text>
                </View>
               
              </TouchableOpacity>
            </View>
          </View>
        </Modal>
        <AccountInfo />
      </ScrollView>
    );
  }
}