Question

我正在用Firebase构建一个React Native应用程序。我正在尝试通过在底部标签导航器中进行身份验证来使屏幕适应特定标签。

让我们说Tab1是该底部标签导航器上的原始屏幕，而Tab2是我要进行身份验证并导航到的屏幕。每当我进行身份验证并导航到Tab2时，我都希望Tab2成为我单击同一底部标签时显示的屏幕。

在这种情况下，Home.js是Tab1，以下代码属于Home.js。在这里，如果将名为screen的状态设置为屏幕的特定名称，则它将有条件地呈现该特定屏幕。否则，它将渲染按钮以转到那些屏幕。 HelderScreen，LolsScreen和AthleanScreen有3种可能成为Tab2。

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>
);
  }
}

这是PasswordInputModal.js，它是允许我在这些屏幕之一上进行身份验证并使其适应底部标签的模式。我在这里所做的是，在对用户进行身份验证时，将一个称为screen的状态设置为应显示的屏幕的名称。实际上，这不是导航，而是条件渲染。

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 = () => {
    //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>
);
  }
}

但是，代码无法正常工作。在身份验证并导航到Tab2之后，每当我在同一底部的标签导航器上双击时，都会显示Tab1。我真的不知道我在做什么错。

能帮我吗？

验证并导航至底部标签导航器后，使其适应屏幕

0 个答案: