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的{{1}}设置为屏幕的特定名称，则它将有条件地呈现该特定屏幕。否则，它将渲染按钮以转到那些屏幕。

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> ); } }的{{1}}设置为应显示的屏幕的名称。 实际上，这与导航无关。这实际上称为条件渲染。

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

在导航至屏幕并使用React Native中的底部选项卡导航器进行适应之前，如何使用密码身份验证？

1 个答案: