如何使用密码身份验证，然后导航到屏幕并使用React Native中底部的标签导航器进行调整？

Question

此问题是this问题的扩展，来自提出该问题的同一位成员。

首先，他的问题是，在导航到屏幕之前如何进行身份验证。但是，他接着问，如何使导航的新屏幕适应底部选项卡导航器中的特定选项卡（比方说Tab1）。这意味着，在经过身份验证后导航到特定屏幕之后，他想单击另一个选项卡（假设为Tab2），然后单击上一个选项卡（Tab1），并且导航的屏幕仍应显示在该先前的选项卡（Tab1）上。 ）。

我在下面提供了对这个新问题的答案...

Answer 1

这是我建议的解决方案。

此答案是first question中答案的扩展。

Home.js

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, ScrollView } from 'react-native';
import PasswordInputModal from './PasswordInputModal'
import HelderScreen from 'path/to/HelderScreen';
import LolsScreen from 'path/to/LolsScreen';
import AthleanScreen from 'path/to/AthleanScreen';

export default class HomeScreen extends Component {
  constructor(props) {
    super(props); 
    this.state = {
      screen: null,
    }
  }

  switchScreen = () => {
    switch (this.state.screen) {
      case 'Helder' : return <HelderScreen />;
      case 'Lols'   : return <LolsScreen />;
      case 'Athlean': return <AthleanScreen />;
      default       : this.setState({ screen: null });
    }
  }

  render() {
    if(this.state.screen) { return this.switchScreen() }

    return (
      <View style={styles.container}>
        <ScrollView style={styles.flatlist}>
          <View style={styles.flatlist1}>
            <TouchableOpacity onPress={() => this.PasswordInputModal.open('Helder')}>
              <Text style={styles.item}>Empresa do Helder</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.flatlist1}>
            <TouchableOpacity onPress={() => this.PasswordInputModal.open('Lols')}>
              <Text style={styles.item}>Lols Inc</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.flatlist1}>
            <TouchableOpacity onPress={() => this.PasswordInputModal.open('Athlean')}>
              <Text style={styles.item}>Tesla Portugal</Text>
            </TouchableOpacity>
          </View>          
        </ScrollView>

        <PasswordInputModal
          ref={modal => this.PasswordInputModal = modal} 
          navigation={this.props.navigation}
          onAuthentication={(screen) => this.setState({ screen })} />
      </View>
    );
  }
}

这里，如果将名为state的screen设置为屏幕的特定名称，它将有条件地渲染该特定屏幕。否则，它将渲染按钮以转到那些屏幕。

PasswordInputModal.js

import React, { Component } from 'react';
import { View, TextInput, Button } from 'react-native';
import Modal from 'react-native-modal';

export default class PasswordInputModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      password  : '',
      isVisible : false,
      screen    : null,
    };
  }

  open = (screen) => this.setState({ isVisible: true, screen: screen });

  close = () => this.setState({ isVisible: false });

  onPressSubmitButton = () => {
    //Use any authentication method you want according to your requirement.
    //Here, it is taken as authenticated if and only if the input password is "12345".

    const isAuthenticated = ("12345" == this.state.password); //If input password is '12345', isAuthenticated gets true boolean value and false otherwise.

    if(isAuthenticated) {
      this.props.onAuthentication(this.state.screen);
    }
    else {
      console.log("Invalid password"); //Prompt an error alert or whatever you prefer.
    }

    this.close();
  }

  renderModalContent = () => (
    <View>
      <TextInput type={'password'} value={this.state.password} onChangeText={(password) => this.setState({ password })} />
      <Button onPress={() => this.onPressSubmitButton()} title="Submit" color="#841584" />
    </View>
  );


  render() {
    return (
      <Modal
        isVisible={this.state.isVisible}
        backdropColor="#000000"
        backdropOpacity={0.9}
        animationIn="zoomInDown"
        animationOut="zoomOutUp"
        animationInTiming={600}
        animationOutTiming={600}
        backdropTransitionInTiming={600}
        backdropTransitionOutTiming={600}
      >
        {this.renderModalContent()}
      </Modal>
    );
  }
}

我在这里所做的是，当用户通过身份验证后，名为state的screen被设置为应显示的屏幕的名称。 实际上，这不是导航。这实际上称为条件渲染。

我没有亲自测试此代码。希望对提出这个问题的成员有所帮助。