Προηγουμένως, στο „Exploring React Native (Συνέχεια Μέρος 2)“, συνεχίσαμε να εργαζόμαστε στην απλή μας εφαρμογή. Ο κώδικας για την εφαρμογή ήταν μεγάλος και βρισκόταν σε ένα αρχείο μετά το άρθρο „Εξερεύνηση του React Native (Συνέχεια Μέρος 1)“. Επειδή το React Native χρησιμοποιεί εγγενή στοιχεία ως δομικά στοιχεία, αποφασίσαμε να αναλύσουμε κάθε τμήμα της εφαρμογής σε προσαρμοσμένα στοιχεία. Υπήρχε ένα προσαρμοσμένο στοιχείο για τις εικόνες, τα κείμενα και τα κουμπιά μας. Στη συνέχεια χρησιμοποιήσαμε το στοιχείο Προβολή του React Native για να δημιουργήσουμε κάρτες για κάθε θέμα και μάθαμε τους διαφορετικούς τρόπους για να κάνουμε στυλ στοιχείων.
Σε αυτό το άρθρο, θα συνεχίσουμε να εργαζόμαστε για το έργο μας υλοποιώντας το στοιχείο TextInput που παρέχεται από το React Native. Στη συνέχεια, θα χρησιμοποιήσουμε ορισμένες συναρτήσεις JavaScript για να μετατρέψουμε τον μετρητή στον σωστό τύπο δεδομένων.
Ας αρχίσουμε!
Ενσωματωμένα εξαρτήματα
Θα εργάζομαι σε Mac χρησιμοποιώντας τον κώδικα του Visual Studio ως πρόγραμμα επεξεργασίας, θα τρέχω την εφαρμογή στον προσομοιωτή iOS και θα εργάζομαι με το έργο „FirstRNProject“. Εάν χρησιμοποιείτε Windows ή στοχεύετε Android, θα δοκιμάσω την εφαρμογή στον εξομοιωτή Android στο τέλος του άρθρου. Αυτός ο κωδικός θα λειτουργήσει επίσης εάν χρησιμοποιείτε το Expo και θα δοκιμαστεί επίσης αργότερα.
Εάν ξεκινάτε με ένα νέο έργο React Native ή Expo ή δεν ακολουθήσατε το προηγούμενο άρθρο, ακολουθεί η δομή του έργου:
Εδώ είναι ο κωδικός:
App.js
import React, { Component } from 'react';
import Main from './src/screens/Main'
class App extends Component {
render() {
return <Main />
}
}
export default App;
Main.js
import React, { Component } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import OurImage from '../components/OurImage';
import Question from '../components/Question';
import Counter from '../components/Counter';
import OurButton from '../components/OurButton';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#bff0d4',
paddingTop: 20
},
cardStyle: {
borderColor: '#535B60',
borderWidth: 2,
margin: 20,
borderRadius: 10,
},
buttonRow: {
flexDirection: 'row',
alignSelf: 'center'
}
});
class Main extends Component {
state = {
raccoons: 0,
pigeons: 0
};
//Raccoon Functions
addRaccoons = () => {
this.setState({
raccoons: this.state.raccoons + 1
})
}
removeRaccoons = () => {
if(this.state.raccoons !== 0){
this.setState({
raccoons: this.state.raccoons - 1
})
}
}
//Pigeon Functions
addPigeons = () => {
this.setState({
pigeons: this.state.pigeons + 1
})
}
removePigeons = () => {
if(this.state.pigeons !== 0){
this.setState({
pigeons: this.state.pigeons - 1
})
}
}
render() {
return (
<ScrollView style={styles.container}>
{/* Raccoon */}
<View style={styles.cardStyle}>
<OurImage imageSource={require('../img/raccoon.png')} />
<Question question='How many raccoons did you see last night?' />
<Counter count={this.state.raccoons} />
{/* Raccoon Button */}
<View style={styles.buttonRow}>
<OurButton buttonColor="#9FC4AD"
onPressed={this.addRaccoons}
text="PLUS"
/>
<OurButton buttonColor="#BAAAC4"
onPressed={this.removeRaccoons}
text="MINUS"
/>
</View>
</View>
{/* Pigeon */}
<View style={[styles.cardStyle, {marginBottom: 60}]}>
<OurImage imageSource={{ uri: 'https://cdn.pixabay.com/photo/2012/04/02/12/43/pigeon-24391_1280.png' }} />
<Question question='How many pigeons did you see today?' />
<Counter count={this.state.pigeons} />
{/* Pigeon Buttons */}
<View style={styles.buttonRow}>
<OurButton buttonColor="#9FC4AD"
onPressed={this.addPigeons}
text="PLUS"
/>
<OurButton buttonColor="#BAAAC4"
onPressed={this.removePigeons}
text="MINUS"
/>
</View>
</View>
</ScrollView>
)
}
}
export default Main;
OurImage.js
import React from 'react';
import { Image, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
image: {
height: 200,
width: 200,
alignSelf: 'center'
}
})
const OurImage = ({ imageSource }) => (
<Image style={styles.image} resizeMode="contain" source={imageSource} />
);
export default OurImage;
Ερώτηση.js
import React from 'react';
import { StyleSheet, Text } from 'react-native';
const styles = StyleSheet.create({
question: {
fontSize: 30,
fontWeight: 'bold',
textAlign: 'center',
color: '#535B60',
padding: 10
},
})
const Question = ({ question }) => (
<Text style={styles.question}>{question}</Text>
);
export default Question;
Count.js
import React from 'react';
import { StyleSheet, Text } from 'react-native';
const styles = StyleSheet.create({
number: {
fontSize: 60,
fontWeight: 'bold',
textAlign: 'center',
color: '#535B60',
padding: 10
},
})
const Counter = ({ count }) => (
<Text style={styles.number} >{count}</Text>
);
export default Counter;
OurButton.js
import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';
const styles = StyleSheet.create({
buttonStyling: {
width: 150,
borderRadius: 10,
margin: 5,
alignSelf: 'center'
},
buttonText: {
fontSize: 30,
fontWeight: 'bold',
textAlign: 'center',
color: '#535B60'
},
})
const OurButton = ({ buttonColor, onPressed, text }) => (
<TouchableOpacity onPress={onPressed} style={[styles.buttonStyling, {backgroundColor:buttonColor}]} >
<Text style={styles.buttonText}>{text}</Text>
</TouchableOpacity>
);
export default OurButton;
Δείτε πώς φαινόταν η εφαρμογή:
Η εφαρμογή φαίνεται υπέροχη, ο κώδικας είναι καθαρός και έχουμε προσαρμοσμένα στοιχεία. Αυτό που θα κάνουμε είναι να δώσουμε στον χρήστη την επιλογή να αλλάξει τον μετρητή με το πληκτρολόγιο. Αυτό θα γίνει με το στοιχείο TextInput του React Native. Σύμφωνα με την τεκμηρίωση του React Native, «Ένα βασικό στοιχείο για την εισαγωγή κειμένου στην εφαρμογή μέσω πληκτρολογίου. Τα στηρίγματα παρέχουν δυνατότητα διαμόρφωσης για πολλές λειτουργίες, όπως αυτόματη διόρθωση, αυτόματη χρήση κεφαλαίων, κείμενο κράτησης θέσης και διαφορετικούς τύπους πληκτρολογίου, όπως ένα αριθμητικό πληκτρολόγιο.“
Ανοίξτε το αρχείο „Counter.js“ και εισαγάγετε το TextInput από το React Native. Στη συνέχεια, διαγράψτε το στοιχείο Text και αντικαταστήστε το με το στοιχείο TextInput ως εξής:
import React from 'react';
import { StyleSheet, Text, TextInput } from 'react-native';
const styles = StyleSheet.create({
number: {
fontSize: 60,
fontWeight: 'bold',
textAlign: 'center',
color: '#535B60',
padding: 10
},
})
const Counter = ({ count }) => (
<TextInput />
);
export default Counter;
Αποθηκεύστε το αρχείο και φορτώστε ξανά.
Γεια τι έγινε με το μηδέν; Λοιπόν, το TextInput απαιτεί να διαβιβαστεί μια τιμή στηρίγματος. Δώστε στο στοιχείο ένα στήριγμα „αξίας“ που είναι ίσο με το πλήθος.
<TextInput value={count} />
Δεν φαίνεται τίποτα. Αν κοιτάξετε στο κάτω μέρος της οθόνης, θα δείτε ότι υπάρχει μια προειδοποίηση. Η προειδοποίηση λέει ότι η τιμή του TextInput πρέπει να είναι μια συμβολοσειρά. Για να λειτουργήσει το στοιχείο TextInput, θα χρειαστεί να χρησιμοποιήσουμε κάποια JavaScript. Το σχέδιο είναι να αλλάξετε τα δεδομένα από έναν αριθμό σε μια συμβολοσειρά. Στη συνέχεια, όταν πατηθούν τα κουμπιά, θα μετατρέψουμε τη συμβολοσειρά σε αριθμό και στη συνέχεια σε συμβολοσειρά. Ας ελπίσουμε ότι αυτό λειτουργεί.
Ξεκινήστε αλλάζοντας τα δεδομένα σε κατάσταση από έναν αριθμό σε μια συμβολοσειρά. Μεταβείτε στο „Main.js“ και απλώς βάλτε τα εισαγωγικά γύρω από το μηδέν, ως εξής:
state = {
raccoons: '0',
pigeons: '0'
};
Αποθηκεύστε και φορτώστε ξανά το αρχείο για να δείτε ότι τα μηδενικά εμφανίζονται ξανά.
Έχουμε χάσει το στυλ μας. Ας προσθέσουμε στυλ στο στοιχείο TextInput στο „Counter.js“ περνώντας το στιλ.
const styles = StyleSheet.create({
number: {
fontSize: 60,
fontWeight: 'bold',
textAlign: 'center',
color: '#535B60',
padding: 10
},
})
const Counter = ({ count }) => (
<TextInput
style={styles.number}
value={count}
/>
);
Εάν αποθηκεύσουμε το αρχείο και φορτώσουμε ξανά την εφαρμογή, τα μηδενικά θα εμφανιστούν με το στυλ που είχαμε πριν.
Αλλά αν προσπαθήσετε να χρησιμοποιήσετε το κουμπί „ΣΥΝ“, θα συνδέσει ένα στο τέλος του κειμένου κάθε φορά που το πατάτε. Και αν χρησιμοποιήσετε το κουμπί „ΜΕΙΟΝ“, το κείμενο θα εξαφανιστεί και θα εμφανιστεί μια προειδοποίηση.
Για το τμήμα ρακούν χρησιμοποίησα το κουμπί «ΣΥΝ» και για το τμήμα περιστεριών χρησιμοποίησα το κουμπί «ΜΕΙΟΝ». Αυτά ήταν τα αποτελέσματά μου:
Μεταβείτε στο „Main.js“ και θα ξεκινήσουμε με τη συνάρτηση „addRaccoons“. Δημιουργήστε μια μεταβλητή με το όνομα „num“, πριν από το „this.setState“. Αυτή η μεταβλητή θα είναι ίση με „parseInt({this.state.raccoons}) + 1“. Η JavaScript συνοδεύεται από ορισμένες ενσωματωμένες συναρτήσεις, παρόμοια με τον τρόπο που το React Native διαθέτει ενσωματωμένα στοιχεία. Χρησιμοποιούμε τη συνάρτηση „parseInt()“ για να μετατρέψουμε το „{this.state.raccoons}“ από συμβολοσειρά σε αριθμό και, στη συνέχεια, προσθέστε ένα. Μετά, θα ορίσουμε το „num“ ίσο με το „num.toString()“. Εδώ χρησιμοποιούμε μια άλλη συνάρτηση JavaScript „toString()“. Αυτή η συνάρτηση μετατρέπει έναν αριθμό σε συμβολοσειρά. Τώρα που το „num“ είναι και πάλι μια συμβολοσειρά, μπορούμε τώρα να χρησιμοποιήσουμε το „this.setState“ για να ορίσουμε τα „raccoons“ σε „num“.
//Raccoon Functions
addRaccoons = () => {
let num = parseInt(this.state.raccoons) + 1;
num = num.toString();
this.setState({
raccoons: num
})
}
Αποθηκεύστε το αρχείο και φορτώστε ξανά την εφαρμογή:
Δροσερός! Το κουμπί λειτουργεί και μπορούμε να το εφαρμόσουμε στη συνάρτηση „addPigeons“, απλά θυμηθείτε να χρησιμοποιήσετε το „{this.state.pigeons}“. Τώρα τα κουμπιά „ΣΥΝ“ για το τμήμα ρακούν και περιστέρι θα λειτουργήσουν, αλλά το „ΠΛΗΝ“ θα εξακολουθεί να προκαλεί την εμφάνιση μιας προειδοποίησης από την εφαρμογή.
//Pigeon Functions
addPigeons = () => {
let num = parseInt(this.state.pigeons) + 1;
num = num.toString();
this.setState({
pigeons: num
})
}
Μεταβείτε στο „removeRaccoons“ και ξεκινήστε δημιουργώντας μια μεταβλητή με το όνομα „num“. Αυτή η μεταβλητή θα είναι ίση με „parseInt(this.state.raccoons)“. Στη συνέχεια, αντικαταστήστε το „{this.state.raccoons}“ με το „num“ στην συνθήκη if. Εάν το „num“ δεν είναι ίσο με μηδέν, ορίστε το „num“ σε „num – 1“ και μετά μετατρέψτε το σε συμβολοσειρά. Το τελευταίο πράγμα που πρέπει να κάνετε είναι να ορίσετε το „{this.state.raccoons}“ σε „num“.
Εδώ είναι ο κωδικός:
removeRaccoons = () => {
let num = parseInt(this.state.raccoons);
if(num !== 0){
num = num - 1;
num = num.toString();
this.setState({
raccoons: num
})
}
}
Ο πάγκος για το ρακούν λειτουργεί ξανά. Πάμε να προσθέσουμε αυτή τη λογική στη συνάρτηση “removePigeons”. Και πάλι, θυμηθείτε να χρησιμοποιήσετε το „this.state.pigeons“ διαφορετικά το κουμπί δεν θα λειτουργήσει σωστά.
Εδώ είναι οι τέσσερις λειτουργίες για τα κουμπιά ρακούν και περιστέρι:
//Raccoon Functions
addRaccoons = () => {
let num = parseInt(this.state.raccoons) + 1;
num = num.toString();
this.setState({
raccoons: num
})
}
removeRaccoons = () => {
let num = parseInt(this.state.raccoons);
if(num !== 0){
num = num - 1;
num = num.toString();
this.setState({
raccoons: num
})
}
}
//Pigeon Functions
addPigeons = () => {
let num = parseInt(this.state.pigeons) + 1;
num = num.toString();
this.setState({
pigeons: num
})
}
removePigeons = () => {
let num = parseInt(this.state.pigeons);
if(num !== 0){
num = num - 1;
num = num.toString();
this.setState({
pigeons: num
})
}
}
Στη συνέχεια, αυτό που θέλουμε να κάνουμε είναι να επιλέξουμε τον τύπο πληκτρολογίου του στοιχείου Εισαγωγή κειμένου. Από προεπιλογή, το πληκτρολόγιο αποτελείται από το αλφάβητο, αλλά δεν χρειαζόμαστε γράμματα.
Επιστρέψτε στο „Counter.js“ και περάστε το στοιχείο TextInput την ακόλουθη βάση, „keyboard=’numeric'“.
<TextInput
style={styles.number}
value={count}
keyboardType="numeric"
/>
Για να ελέγξετε ότι εμφανίζεται το σωστό πληκτρολόγιο, αποθηκεύστε και φορτώστε ξανά την εφαρμογή. Στη συνέχεια, πατήστε το μηδέν και θα εμφανιστεί το πληκτρολόγιο. Εάν το πληκτρολόγιο δεν εμφανίζεται στον προσομοιωτή iOS, κάντε κλικ στο μενού «Υλικό» και μεταβείτε στο «Πληκτρολόγιο». Στη συνέχεια, επιλέξτε «Εναλλαγή πληκτρολογίου λογισμικού». Ή στο πληκτρολόγιο του υπολογιστή σας, πατήστε „Command“ και „K“.
Φαίνεται καλά όταν επεξεργάζεστε τον μετρητή του ρακούν, αλλά δεν μπορούμε να δούμε το πεδίο κειμένου κατά την επεξεργασία του μετρητή του περιστεριού. Χρειαζόμαστε τα πεδία κειμένου για να μετακινούνται προς τα επάνω όταν εμφανίζεται το πληκτρολόγιο. Ευτυχώς, το React Native έχει ένα στοιχείο που ονομάζεται KeyboardAvoidingView το οποίο μπορούμε να χρησιμοποιήσουμε. Αυτό το στοιχείο, σύμφωνα με την τεκμηρίωση του React Native, «είναι ένα στοιχείο για την επίλυση του κοινού προβλήματος των προβολών που πρέπει να απομακρυνθούν από το εικονικό πληκτρολόγιο. Μπορεί να προσαρμόσει αυτόματα είτε τη θέση του είτε την κάτω επένδυση με βάση τη θέση του πληκτρολογίου.“
Αρχικά, εισαγάγετε το KeyboardAvoidingView από το React Native. Στη συνέχεια, μέσα στη λειτουργία απόδοσης, τυλίξτε ολόκληρο τον κώδικα JSX με το KeyboardAvoidingView. Δώστε σε αυτό το στοιχείο ένα στήριγμα στυλ ίσο με „flex: 1“ και ένα στήριγμα συμπεριφοράς ίσο με „padding“.
import { KeyboardAvoidingView, ScrollView, StyleSheet, View } from 'react-native';
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
<ScrollView style={styles.container}>
{/* Raccoon */}
<View style={styles.cardStyle}>
<OurImage imageSource={require('../img/raccoon.png')} />
<Question question='How many raccoons did you see last night?' />
<Counter count={this.state.raccoons} />
{/* Raccoon Button */}
<View style={styles.buttonRow}>
<OurButton buttonColor="#9FC4AD"
onPressed={this.addRaccoons}
text="PLUS"
/>
<OurButton buttonColor="#BAAAC4"
onPressed={this.removeRaccoons}
text="MINUS"
/>
</View>
</View>
{/* Pigeon */}
<View style={[styles.cardStyle, {marginBottom: 60}]}>
<OurImage imageSource={{ uri: 'https://cdn.pixabay.com/photo/2012/04/02/12/43/pigeon-24391_1280.png' }} />
<Question question='How many pigeons did you see today?' />
<Counter count={this.state.pigeons} />
{/* Pigeon Buttons */}
<View style={styles.buttonRow}>
<OurButton buttonColor="#9FC4AD"
onPressed={this.addPigeons}
text="PLUS"
/>
<OurButton buttonColor="#BAAAC4"
onPressed={this.removePigeons}
text="MINUS"
/>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
Αποθηκεύστε το αρχείο και φορτώστε ξανά την εφαρμογή. Δοκιμάστε να επιλέξετε την εισαγωγή κειμένου για το περιστέρι και παρατηρήστε ότι ανεβαίνει πάνω από το πληκτρολόγιο.
Πολύ καλύτερα! Τώρα, πρέπει να εργαστούμε για τον χειρισμό της εισόδου του χρήστη. Εάν θέλετε να πατήσετε έναν αριθμό, θα δείτε ότι το μηδέν παραμένει. Το TextInput έχει ένα στήριγμα που ονομάζεται onChangeText, το οποίο πρέπει να εφαρμόσουμε.
Μεταβείτε στο „Counter.js“ και προσθέστε το στηρίγμα onChangeText, θα το ορίσουμε ίσο με „handleText“. Το „handleText“ θα είναι ένα στήριγμα που μεταβιβάζεται στο „Counter.js“ από το „Main.js“
Counter.js
const Counter = ({ count, handleText }) => (
<TextInput
style={styles.number}
value={count}
keyboardType="numeric"
onChangeText={handleText}
/>
);
Στη συνέχεια, στο „Main.js“, κατευθυνθείτε στο στοιχείο Counter και δώστε του το prop „handleText“. Θα έχουμε αυτό το prop ίσο με μια συνάρτηση βέλους που λαμβάνει την είσοδο των χρηστών και ορίζει την κατάσταση ίση με αυτήν.
Main.js
<Counter
count={this.state.raccoons}
handleText={(text) => this.setState({ raccoons: text})}
/>
Τώρα όταν χρησιμοποιούμε το πληκτρολόγιο για να εισάγουμε έναν αριθμό, το κείμενο θα αλλάξει.
Δροσερός! Μπορούμε να αλλάξουμε το κείμενο πατώντας στο πληκτρολόγιο. Ναι, το μηδέν είναι μπροστά από τους αριθμούς δεν φαίνεται ωραίο, αλλά λειτουργεί. Μπορούμε ακόμη και να χρησιμοποιήσουμε τα κουμπιά μας για να αυξήσουμε ή να μειώσουμε την τιμή. Δεν θα ανησυχούμε για το μηδέν προς το παρόν, αντ‘ αυτού ας εφαρμόσουμε το „handleText“ για την ενότητα περιστεριών.
<Counter
count={this.state.pigeons}
handleText={(text) => this.setState({ pigeons: text})}
/>
Αποθηκεύστε το αρχείο και φορτώστε ξανά για να δοκιμάσετε το τμήμα περιστεριών.
Εξαιρετική! Λειτουργεί και εδώ. Σε αυτό το σημείο γνωρίζουμε ότι η εφαρμογή λειτουργεί στον προσομοιωτή iOS, ας προχωρήσουμε και να τη δοκιμάσουμε πρώτα στο Android και μετά στην Expo.
Δείτε πώς φαίνεται στο Android:
Ουάου! Αυτό ήταν απροσδόκητο. Εάν επιστρέψουμε στο έγγραφο React Native σχετικά με τη συμπεριφορά του KeyboardAvoidingView, δηλώνει ότι, «Σημείωση: Το Android και το iOS αλληλεπιδρούν με διαφορετικό τρόπο με αυτό το υποστήριγμα. Το Android μπορεί να συμπεριφέρεται καλύτερα όταν δεν του δίνεται καθόλου υποστήριξη συμπεριφοράς, ενώ το iOS είναι το αντίθετο.» Ως εκ τούτου, είναι η βάση συμπεριφοράς που μεταβιβάζεται στο KeyboardAvoidingView που προκαλεί το διάστημα μεταξύ του πληκτρολογίου και της εισαγωγής κειμένου.
Αυτό που μπορούμε να κάνουμε είναι να ελέγξουμε σε ποιο τηλέφωνο εκτελείται η εφαρμογή. Πρώτα εισάγουμε την πλατφόρμα και δημιουργούμε μια μεταβλητή που ονομάζεται „paddingBehavior“. Αυτή η μεταβλητή θα ελέγξει εάν η εφαρμογή εκτελείται σε iOS και αν είναι τότε „paddingBehavior = ‚padding'“, διαφορετικά είναι ίσο με “. Χρησιμοποιώντας αυτήν τη μεταβλητή, έχετε „behavior={paddingBehavior}“.
import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
const paddingBehavior = Platform.OS === 'ios' ? 'padding' : '';
<KeyboardAvoidingView style={{ flex: 1 }} behavior={paddingBehavior}>
Αποθηκεύστε το αρχείο και φορτώστε ξανά την εφαρμογή.
Λειτουργεί πολύ καλύτερα! Ώρα για δοκιμή στην Expo. Μετά την αντιγραφή του κώδικα στο έργο Expo και την εκτέλεση της εφαρμογής, εδώ είναι αυτό που έλαβα:
Ομορφη! Η εφαρμογή λειτουργεί εξαιρετικά και στην Expo. Ακολουθούν τα δύο αρχεία που εργάζονται σε όλο αυτό το άρθρο.
Main.js
1. import React, { Component } from 'react';
2. import { KeyboardAvoidingView, Platform, ScrollView, StyleSheet, View } from 'react-native';
import OurImage from '../components/OurImage';
import Question from '../components/Question';
import Counter from '../components/Counter';
import OurButton from '../components/OurButton';
const paddingBehavior = Platform.OS === 'ios' ? 'padding' : '';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#bff0d4',
paddingTop: 20
},
cardStyle: {
borderColor: '#535B60',
borderWidth: 2,
margin: 20,
borderRadius: 10,
},
buttonRow: {
flexDirection: 'row',
alignSelf: 'center'
}
});
class Main extends Component {
state = {
raccoons: '0',
pigeons: '0'
};
//Raccoon Functions
addRaccoons = () => {
let num = parseInt(this.state.raccoons) + 1;
num = num.toString();
this.setState({
raccoons: num
})
}
removeRaccoons = () => {
let num = parseInt(this.state.raccoons);
if(num !== 0){
num = num - 1;
num = num.toString();
this.setState({
raccoons: num
})
}
}
//Pigeon Functions
addPigeons = () => {
let num = parseInt(this.state.pigeons) + 1;
num = num.toString();
this.setState({
pigeons: num
})
}
removePigeons = () => {
let num = parseInt(this.state.pigeons);
if(num !== 0){
num = num - 1;
num = num.toString();
this.setState({
pigeons: num
})
}
}
render() {
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior={paddingBehavior}>
<ScrollView style={styles.container}>
{/* Raccoon */}
<View style={styles.cardStyle}>
<OurImage imageSource={require('../img/raccoon.png')} />
<Question question='How many raccoons did you see last night?' />
<Counter
count={this.state.raccoons}
handleText={(text) => this.setState({ raccoons: text})}
/>
{/* Raccoon Button */}
<View style={styles.buttonRow}>
<OurButton buttonColor="#9FC4AD"
onPressed={this.addRaccoons}
text="PLUS"
/>
<OurButton buttonColor="#BAAAC4"
onPressed={this.removeRaccoons}
text="MINUS"
/>
</View>
</View>
{/* Pigeon */}
<View style={[styles.cardStyle, {marginBottom: 60}]}>
<OurImage imageSource={{ uri: 'https://cdn.pixabay.com/photo/2012/04/02/12/43/pigeon-24391_1280.png' }} />
<Question question='How many pigeons did you see today?' />
<Counter
count={this.state.pigeons}
handleText={(text) => this.setState({ pigeons: text})}
/>
{/* Pigeon Buttons */}
<View style={styles.buttonRow}>
<OurButton buttonColor="#9FC4AD"
onPressed={this.addPigeons}
text="PLUS"
/>
<OurButton buttonColor="#BAAAC4"
onPressed={this.removePigeons}
text="MINUS"
/>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
)
}
}
export default Main;
Counter.js
import React from 'react';
import { StyleSheet, Text, TextInput } from 'react-native';
const styles = StyleSheet.create({
number: {
fontSize: 60,
fontWeight: 'bold',
textAlign: 'center',
color: '#535B60',
padding: 10
},
})
const Counter = ({ count, handleText }) => (
<TextInput
style={styles.number}
value={count}
keyboardType="numeric"
onChangeText={handleText}
/>
);
export default Counter;
Αυτά τα δύο αρχεία ήταν τα μόνα αρχεία που δουλέψαμε σε αυτό το άρθρο, αν χρειάζεστε τα άλλα, ελέγξτε την αρχή του άρθρου.
Καλή δουλειά! Προσθέσαμε το στοιχείο TextInput για να επιτρέψουμε σε έναν χρήστη να χρησιμοποιήσει το πληκτρολόγιο για να επεξεργαστεί τα δεδομένα του μετρητή. Χρησιμοποιήσαμε επίσης ορισμένες συναρτήσεις JavaScript για να μετατρέψουμε τον μετρητή από συμβολοσειρά σε αριθμό και πίσω σε συμβολοσειρά επειδή το TextInput λειτουργούσε μόνο με συμβολοσειρές. Τα κουμπιά εξακολουθούν να λειτουργούν και μπορούν να χρησιμοποιηθούν για τον έλεγχο του μετρητή. Προσθέσαμε επίσης το KeyboardAvoidingView για να μπορούμε να βλέπουμε πάντα το πεδίο εισαγωγής κειμένου όταν εμφανίζεται το πληκτρολόγιο. Αυτό προκάλεσε ένα πρόβλημα στο Android επειδή διαφορετικά στηρίγματα έχουν διαφορετικά αποτελέσματα σε συγκεκριμένες πλατφόρμες. Για να επιλύσουμε αυτό το ζήτημα, δημιουργήσαμε μια μεταβλητή που έλεγχε την πλατφόρμα στην οποία εκτελείται η εφαρμογή.
Μέχρι την επόμενη φορά, προσπαθήστε να διαβάσετε τον κώδικα και να κάνετε αλλαγές για να κατανοήσετε καλύτερα τα θέματα που καλύπτονταν εδώ.
![[Google Tag Manager Tips] Συλλέξτε προηγούμενους όρους αναζήτησης Naver](https://bfiua.com/wp-content/uploads/2023/10/1698283806_Google-Tag-Manager-Tips-Συλλέξτε-προηγούμενους-όρους-αναζήτησης-Naver-150x150.jpg)
![[Google Analytics 4] Συνδεθείτε στο Google Search Console](https://bfiua.com/wp-content/uploads/2023/10/1698237485_Google-Analytics-4-Συνδεθείτε-στο-Google-Search-Console-150x150.jpg)
![[Google Tag Manager Tips] Έρευνες στόχευσης με GTM](https://bfiua.com/wp-content/uploads/2023/10/1698191168_Google-Tag-Manager-Tips-Έρευνες-στόχευσης-με-GTM-150x150.jpg)
