Блог

У меня есть TextInput и функция с именем onEnterPin.

Но я просто не мог достичь этого значения. Все, что я хочу, это получить значение внутри TextInput и перейти на другой экран, если значение внутри TextInput правильное

Не могли бы вы мне помочь? Кстати, еще один вопрос: После того, как pin-код указан правильно, я перехожу на главный экран, и на главном экране у меня должны быть комнаты(например, гостиная и т. Д.) И предметы(телевизор, интернет и т. Д.) Под названием и изображением комнаты. Не могли бы вы мне намекнуть?

Вот код

 import React, { useState } from "react";
import { Text, View, Button, StyleSheet, TextInput, Alert } from "react-native";



const SplashScreen = ({ navigation }) => {

const [pin, setPin] = useState('');
  
  const CORRECT_PIN = "5555";
  const onEnterPin = (pin)=>{
      if(pin === CORRECT_PIN) {
      
        navigation.navigate("Home");
      }
      else{
        Alert.alert("problem here")
      }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Welcome to Rooms Page</Text>
      <Button 
        title="Go to HomeScreen"
        onPress = {() => {
          navigation.navigate("Home", {
            itemId: 86,
            otherParam: "anything you want here"
          });
        }} // go to the screen named Home
      />
      <Text>PIN gir</Text>
      <TextInput value={pin} style={styles.textInput} onChangeText={pin => setPin(pin)}></TextInput>
      <Button
         title="Enter"
         onPress = {() => {
           onEnterPin(value); // i guess the problem is here, what should i write
         }}
      />
      
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#307ecc',
  },
  textInput: {
    borderWidth:.5,
    height:35,
    margin:12,
    
    
  }
});


export default SplashScreen;

HomeScreen.js
import React from "react";
import { View, Text, Button } from "react-native";


const HomeScreen = ({ route, navigation }) => {
  const { itemId } = route.params;
  const { otherParam } = route.params;

  

  return(
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Text>itemId: {JSON.stringify(itemId)}</Text>
      <Text>otherParam: {JSON.stringify(otherParam)}</Text>
      <Button 
        title="Go back"
        onPress = {() => navigation.goBack()}
      />
      <Button 
        title="go to example screen"
        onPress={() => navigation.navigate("Example")}
      />
      <Button 
        title="go to Home page again, using push"
        onPress = {() => { 
          navigation.push("Home", {
            itemId: Math.floor(Math.random() * 100)
          }),
          navigation.setParams({itemId:200}) // it updates itemId as 200, then does random number job in Math.random()
        }}
      />
    </View>
// Avoid using setParams to update screen options such as title etc. If you need to update options, use setOptions instead.
  )
}

export default HomeScreen;
 

Измените параметр onEnterPin со значения на pin-код следующим образом:

 <Button
     title="Enter"
     onPress = {() => {
      onEnterPin(pin); // <<<<<<<<<<<<<<<<
      }}
 />
 

у моего текстового ввода есть идентификатор, и с его помощью мы можем сделать это:

 document.getElementById(id).value
 

чтобы получить значение входных данных.

Вам не нужно передавать его в функцию, так pin как значение уже существует в локальном состоянии:

 const onEnterPin = () => {
  if (pin === CORRECT_PIN) {
    navigation.navigate("Home");
  }
  else {
    Alert.alert("problem here")
  }
};
 

и:

 <TextInput value={pin} style={styles.textInput} onChangeText={setPin} />
<Button
  title="Enter"
  onPress={onEnterPin}
/>
 

Поскольку переменная » pin «существует как локальное состояние, вы можете использовать ее в методе» onEnterPin () » без использования параметра.

Метод «onEnterPin» будет выглядеть следующим образом:

  const onEnterPin = () => {
  if(pin === CORRECT_PIN) {
    navigation.navigate("Home")
  }
  else{
    Alert.alert("problem here")
  }
 }