Использование паролей для навигации по экранам - PullRequest
Новая
       97

Использование паролей для навигации по экранам

1 голос
/ 28 мая 2020

Я делаю приложение React Native + Firebase. На данный момент я изо всех сил пытаюсь создать всплывающее сообщение с запросом определенного пароля всякий раз, когда я нажимаю один из маршрутизаторов страниц. У меня есть 3 страницы, вложенные в StackNavigator по адресу App.js.

Как вы можете видеть из следующего кода, у меня есть 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, не могли бы вы мне помочь?

1 Ответ

1 голос
/ 28 мая 2020

Вам нужно 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(), и устанавливается состояние для использования при переходе.

Я не тестировал этот код, и стили модального окна не применяются мной . Пожалуйста, наберите go через это и попробуйте сделать, как хотите. Не стесняйтесь спрашивать меня, есть ли у вас проблемы. Удачи!

...