使用密码浏览屏幕

IT技术 reactjs firebase react-native react-router password-protection
2021-04-29 11:54:25

我正在做一个 react native + firebase 应用程序。目前,每当我按下其中一个页面路由器时,我都在努力让消息弹出,要求输入某个密码。我有 3 个页面嵌套在 StackNavigator 中App.js

正如您在以下代码中看到的那样,我有 3 个路由器到这些页面(分别是HelderScreen.jsLolsScreen.jsAthleanScreen.js)。每当我点击这些路由器时,我都希望弹出一条消息,要求为每个路由器提供一个唯一的密码。

这是我的Home.js主要代码

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, LayoutAnimation, Image, FlatList, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

export default class HomeScreen extends React.Component {
return (
  <View style={styles.container}>
    <ScrollView style={styles.flatlist}>
      <View style={styles.flatlist1}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Helder')}>
          <Text style={styles.item}>Empresa do Helder</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.flatlist1}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Lols')}>
          <Text style={styles.item}>Lols Inc</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.flatlist1}>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Athlean')}>
          <Text style={styles.item}>Tesla Portugal</Text>
        </TouchableOpacity>
      </View>          
    </ScrollView>
  </View>
);
  }
}

这是 my 的主要代码App.js,其中包含 StackNavigator 和 BottomStackNavigator

const HomeStack = createStackNavigator({
  Home: {
screen: HomeScreen,
navigationOptions: () => ({
    headerShown: false
})
  },
  Helder: {
screen: HelderScreen,
navigationOptions: () => ({
  title: "Helder"
})
  },
  Athlean: {
screen: AthleanScreen,
navigationOptions: () => ({
  title: "Athlean"
})
  },
  Lols : {
screen: LolsScreen,
navigationOptions: () => ({
  title: "Lols"
})
  }
});


const AppContainer = createBottomTabNavigator (
  {
        Home: {
      screen: HomeStack,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-home' size={24} color={tintColor}/>
      }
    },
    Message: {
      screen: MessageScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-chatboxes' size={24} color={tintColor}/>
      }
    },      
    Notification: {
      screen: NotificationScreen,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-notifications' size={24} color={tintColor}/>
      }
    },
    Profile: {
      screen: DrawerNavigator,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Ionicons name='ios-person' size={24} color={tintColor}/>
      }
    },
  },
  {
    defaultNavigationOptions:{
      tabBarOnPress: ({navigation, defaultHandler}) => {
        if (navigation.state.key === 'Post'){
          navigation.navigate('postModal')
        } else {
          defaultHandler()
        }
      }
    },

    tabBarOptions:{
      activeTintColor: 'orange',
      inactiveTintColor: 'black',
      showLabel: false
    }
  },
 {
mode: 'modal',
headerMode: 'none'
  }
)

我是 React Native 的新手,你能帮我吗?

1个回答

你需要react-native-modal为了实现这种行为。你要做的是,

1) 创建一个包含TextInput输入密码和提交按钮的模态

2) 一旦用户点击Home.js屏幕上的按钮,Modal就会打开并询问密码。(请确保您拥有ref模态,并且您已经实现了使用ref.

3)当用户输入密码时,您可以进行身份​​验证,如果已通过身份验证,则导航到您想要的屏幕。(您可以在Modal实现js文件中编写用于身份验证和导航的代码。)

这是一个示例代码...

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,
      navigateTo: null,
    };
  }

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

  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.navigation.navigate(this.state.navigateTo);
    }
    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>
    );
  }
}

Home.js

import React, { Component } from 'react';
import { Text, View, TouchableOpacity, ScrollView } from 'react-native';
import PasswordInputModal from './PasswordInputModal.js'

export default class HomeScreen extends Component {
  render() {
    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} />
      </View>
    );
  }
}

当打开模态时,我已经传递了成功验证后要导航的屏幕的名称。该屏幕名称作为open()函数的参数传递,并且设置了使用何时导航的状态。

我没有测试这段代码,我也没有应用模态的样式。请完成此操作并尝试按照您的意愿进行操作。如果您有任何问题,请随时问我。祝你好运!