问题
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.
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.
This is my Home.js main code
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>
);
}
}
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'
}
)
I am new to React Native, could you please help me?
回答1:
You need react-native-modal in order to achieve this behavior. What you have to do is,
1) Create a Modal which contains a TextInput to type password and a Submit button.
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) 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.)
Here is a sample code...
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>
);
}
}
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!
来源：https://stackoverflow.com/questions/62063380/using-passwords-to-navigate-screens