使用密码浏览屏幕

Question

我正在做一个 React Native + Firebase 应用程序。目前，每当我按下其中一个页面路由器时，我都在努力弹出一条消息，要求输入特定密码。我在 App.js 的 StackNavigator 中嵌套了 3 个页面。

正如您在下面的代码中看到的那样，我有 3 个路由到这些页面（分别是 HelderScreen.js、LolsScreen.js 和 AthleanScreen.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>
);
  }
}

这是我的 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 的新手，你能帮帮我吗？

Answer 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() 函数的参数传递，并且设置一个状态以用于何时导航。

我没有测试这段代码，我没有应用模态的样式。请仔细阅读并尝试按照您的意愿进行。如果您有任何问题，请随时问我。祝你好运！

使用密码浏览屏幕

Using Passwords to Navigate Screens

password-protection

firebase

reactjs

react-router

react-native