使用密码浏览屏幕 [英] Using Passwords to Navigate Screens
问题描述
我正在做一个React Native + Firebase应用程序.此刻，每当我按下一个页面路由器时，我都在弹出一条消息，要求输入特定的密码.我在 App.js 的StackNavigator中嵌套了3个页面.
I am doing a react native + firebase app. At the moment, I am struggling to make a message pop up asking for a certain password whenever I press one of the page routers. I have 3 pages nested in an StackNavigator at App.js.
如下面的代码所示，我有3个到这些页面的路由器(分别是 HelderScreen.js ， LolsScreen.js 和 AthleanScreen.js).每当我单击这些路由器时，我都希望弹出一条消息，要求为每个路由器输入唯一的密码.
As you can see on the following code, I have 3 routers to those pages (which are HelderScreen.js, LolsScreen.js and AthleanScreen.js). Whenever I click on these routers, I want a message pop up to ask for a unique password to each of those routers.
这是我的 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
And this is the main code from my App.js, which has the StackNavigator and the 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的新手，请你帮帮我吗?
I am new to React Native, could you please help me?
推荐答案
您需要 react-native-modal 才能实现此行为.你要做的是，
You need react-native-modal in order to achieve this behavior. What you have to do is,
1)创建一个包含一个 TextInput (用于输入密码)和一个Submit(提交)按钮的模式.
1) Create a Modal which contains a TextInput to type password and a Submit button.
2)用户单击 Home.js 屏幕中的按钮后，应打开 Modal 并要求输入密码.(请确保您对模态有一个 ref ，并且已经实现了一些必要的操作，以使用 ref 在按钮按下时打开模态.
2) Once the user clicked on the button in the Home.js screen, the Modal should be opened and ask for the password. (Please make sure that you have a ref to the modal and you have implemented necessary things to open the modal on button press using ref.
3)当用户输入密码时，您可以进行身份验证，然后导航到想要的屏幕(如果已通过身份验证).(您可以在 Modal 实现 js 文件中编写用于身份验证和导航的代码.)
3) When the user entered the password, you can authenticate and then navigate to the screen you want if it is authenticated. (You can write the code for authentication and navigation inside your Modal implementation js file.)
这是示例代码...
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()函数的参数传递，并且设置了用于导航的状态.
When opening the modal, I've passed the name of the screen which you want to navigate after successful authentication. That screen name is passed as an argument of the open() function and, a state is set for using when to navigate.
我没有测试此代码，并且模态的样式未由我应用.请仔细阅读并尝试根据需要进行操作.如果您有任何问题，请随时问我.祝你好运！
I didn't test this code and the styles of the modal are not applied by me. Please go through this and try to do it as you want. Feel free to ask me if you have any problems. Good luck!
这篇关于使用密码浏览屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
