Question

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

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

在这种情况下，Home.js是Tab1，下面的代码属于它。在这里，如果将名为screen的状态设置为屏幕的特定名称，则它将有条件地呈现该特定屏幕。否则，它将渲染按钮以转到那些屏幕。 HelderScreen，LolsScreen和AthleanScreen是成为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 个答案: