Πριν από λίγα χρόνια, ένας συνεργάτης μου μου είπε για το React Native. Ήμουν πολύ δύσπιστος. Υποστήριξα ότι είναι απλώς ένα άλλο πλαίσιο πολλαπλών πλατφορμών που δεν θα λειτουργήσει ποτέ στην πραγματική ζωή - λίγα δεν ήξερα πόσο λάθος ήμουν.

τύποι οδηγιών στο angularjs

Πέρασαν χρόνια και οι δεξιότητες React Native έγιναν πάρα πολύ σε ζήτηση. Δεδομένου ότι έμαθα κάτι καινούργιο, σκέφτηκα γιατί να μην το δοκιμάσω; Σήμερα, είμαι τεράστιος υποστηρικτής του React Native.

Μειονεκτήματα:

• Δεν μπορείτε πλέον να χρησιμοποιήσετε το Android Studio
• Το React Native δεν μπορεί να χρησιμοποιηθεί για κάθε εφαρμογή ή δυνατότητα
• Το React Native είναι ένα νέο πλαίσιο και οι ενημερώσεις μπορούν να επηρεάσουν αρνητικά την τρέχουσα βάση κώδικα
• Το JavaScript δεν είναι αυστηρά πληκτρολογημένη γλώσσα
• Το React Native απαιτεί την εκτέλεση μηχανής JavaScript, κάτι που μπορεί να το κάνει λιγότερο αποδοτικό

Πλεονεκτήματα:

• Εύκολο στην εκμάθηση
• Μια κοινόχρηστη βάση κώδικα μεταξύ εφαρμογών Android και iOS, με μόνο μικρές τροποποιήσεις που απαιτούνται για να ταιριάζουν με τις εμπειρίες της πλατφόρμας
• Ζωντανή και καυτή επαναφόρτωση, που σημαίνει ότι δεν υπάρχουν πλέον άπειροι χρόνοι κατασκευής
• Εγγενή στοιχεία και για τις δύο πλατφόρμες
• Συνεχώς βελτιώνεται
• Ενεργά αναπτυσσόμενη κοινότητα
• Τεράστιος αριθμός βιβλιοθηκών
• Το Expo αφαιρεί την ανάγκη να διαθέτετε Mac για ανάπτυξη για iOS
• Μείωση των πόρων εργασίας - ενώ μπορεί να χρειαστείτε κάποια εγγενή ανάπτυξη Android / iOS, θα είναι σπάνια.

Μπορώ να συνεχίσω, αλλά ας σταματήσουμε εδώ και να προχωρήσουμε στο θέμα αυτής της ανάρτησης ιστολογίου. Σε αυτήν την ανάρτηση, πρόκειται να δημιουργήσω τέσσερις εφαρμογές Android React Native:

1. Ένας βασικός μετρητής με κουμπιά για αύξηση και μείωση του μετρητή
2. Μια εφαρμογή για αναζήτηση στο subreddit r / pics
3. Μια γενική σελίδα σύνδεσης
4. Μια εφαρμογή για να περιηγηθείτε στο subreddit r / pics

ΕΔΩ

Όπως ανέφερα παραπάνω, δεν υπάρχει τρόπος να χρησιμοποιήσουμε το Android Studio για την ανάπτυξη του React Native. Χρειαζόμαστε ένα υποκατάστατο. Το React Native μπορεί να αναπτυχθεί πιθανότατα σε οποιονδήποτε σύγχρονο επεξεργαστή κειμένου που είναι διαθέσιμος εκεί (Atom, VS Code, Sublime Text, Brackets κ.λπ.), αλλά επειδή έρχεται με την εμπειρία του Android Studio, το αγαπημένο μου είναι το WebStorm που έχει κατασκευαστεί από την ίδια εταιρεία. Παρόλο που το WebStorm είναι πληρωμένη εφαρμογή (129 $ ανά έτος), μπορείτε να εγκαταστήσετε την έκδοση Early Access. Η κατασκευή EAP του WebStorm είναι δωρεάν και αρκετά σταθερή. Εάν προτιμάτε έναν επεξεργαστή ο οποίος είναι εντελώς δωρεάν, πηγαίνετε για VS Code. Η Microsoft ανέπτυξε ακόμη και εκπληκτικό React Native plugin για αυτό και λειτουργεί πολύ καλά.

Δημιουργία νέου έργου

Προαπαιτούμενα: Το Android SDK, το Node και το React Native είναι εγκατεστημένα στον υπολογιστή σας.

Υπάρχουν δύο τρόποι δημιουργίας νέου έργου React Native.

1. Ο συμβατικός τρόπος. Είτε με το WebStorm GUI είτε με εντολή τερματικού: react-native init AwesomeApeeScapeProject
2. Ευκολότερος τρόπος 'Δημιουργία εφαρμογής Native App'. create-react-native-app AwesomeApeeScapeProject

Εάν χρησιμοποιείτε το create-react-native-app, το δημιουργημένο έργο θα ξεκινήσει με το expo. Δεν θα αναφερθώ σε λεπτομέρειες, αλλά βασικά, σημαίνει ότι δεν χρειάζεται να έχετε εγκατεστημένο το Xcode για να εκτελέσετε την εφαρμογή στο iOS. Είναι επίσης ευκολότερο να ενημερώνετε πάντα τον πελάτη μέσω της λειτουργικότητας του expo.io και ορισμένων άλλων λειτουργιών. Αλλά δεν μπορείτε να προσθέσετε εγγενή κώδικα. Έτσι, εάν αναπτύσσετε μια συγκεκριμένη δυνατότητα, ίσως χρειαστεί να εξαγάγετε μια εφαρμογή από την έκθεση και να χρησιμοποιήσετε ένα κανονικό έργο React Native.

Θα χρησιμοποιήσω την πρώτη μέθοδο.

Ας εκτελέσουμε το έργο. Αρχικά, ανοίξτε έναν εξομοιωτή ή συνδέστε τη συσκευή. Εάν δημιουργήσατε το έργο με το WebStorm GUI, το μόνο που χρειάζεται να κάνετε είναι να επιλέξετε μια διαμόρφωση. Στην επάνω δεξιά γωνία του WebStorm, κάντε κλικ στο αναπτυσσόμενο μενού στα αριστερά του κουμπιού Εκτέλεση, επιλέξτε Android και κάντε κλικ στην επιλογή Εκτέλεση ή εντοπισμός σφαλμάτων. Εάν δημιουργήσατε το έργο με το Terminal, μπορείτε είτε να προσθέσετε ένα νέο React Native config είτε να το εκτελέσετε χρησιμοποιώντας το Terminal:

cd AwesomeApeeScapeProject react-native run-android

Αν όλα πάνε καλά, θα σας υποδεχτούν με την ακόλουθη οθόνη:

Δομή και βασική ρύθμιση

Αξιοσημείωτα στοιχεία μέσα στο έργο είναι:

• android - Έργο Android Studio προκαθορισμένο με υποστήριξη React Native.
• ios - Έργο Xcode προκαθορισμένο με υποστήριξη React Native.
• node_modules - Ένας φάκελος που περιέχει το React Native framework και άλλες βιβλιοθήκες Javascript.
• index.js - Ένα σημείο εισόδου για την εφαρμογή μας.
• App.js - Φορτώθηκε το αρχικό στοιχείο.

---

Ας δημιουργήσουμε ένα φάκελο 'src' μέσα στη ρίζα του έργου και μετακινήστε το App.js εκεί. Θα πρέπει να ενημερώσετε τις εισαγωγές index.js για να ταιριάζει με τη νέα τοποθεσία App.js.

import App from './src/App';

Διαγράψτε τα πάντα στο App.js και επικολλήστε αυτόν τον κωδικό:

import React from 'react'; import {Text} from 'react-native'; export default class App extends React.Component { render() { return ( Hello TopTal ); } }

Ο κωδικός που επικολλήσαμε είναι αρκετά απλός. Δημιουργήσαμε μια τάξη App (παιδί του React.Component) που αντικαθιστά render() μέθοδος και επιστροφές Text συστατικό. React.Component είναι η βασική τάξη για την κατασκευή UI χρησιμοποιώντας JSX. Το export default ο τροποποιητής κάνει την τάξη public.

Είμαστε τώρα έτοιμοι να αρχίσουμε να σχεδιάζουμε τη διάταξή μας.

Διάταξη με Flexbox

Flexbox είναι παρόμοιο με LinearLayout, αλλά Flexbox υπερβαίνει τις ικανότητες LinearLayout

Αυτό το απόσπασμα του JSX:

flex: 1

Δίνει αυτήν τη διάταξη:

---

Ενώ αυτό το XML:

android:layout_width='match_parent' android:layout_height='match_parent'

Το δίνει:

Ο κωδικός JSX φαίνεται οικείος, ε; Ας δημιουργήσουμε ένα 'λεξικό' (ή ένα cheatsheet) για διατάξεις που χρησιμοποιούν παρόμοια σε JSX και Android XML.

Λάβετε υπόψη ότι οι λειτουργίες δεν είναι απαραίτητα ίσες. Προσπαθώ να βοηθήσω τους αρχάριους React Native να κατανοήσουν την ιδέα του συστήματος διάταξης στο React Native. Παρακαλώ αναφερθείτε επίσημος οδηγός για λεπτομερείς πληροφορίες.

Εξετάστε αυτήν την ιδιότητα JSX:

flexDirection

Είναι ισοδύναμο με αυτό:

alignItems

---

Αυτό το απόσπασμα του JSX:

justifyContent

Και αυτό το XML:

flexDirection: row',

Και οι δύο δημιουργούν αυτήν την έξοδο:

---

Ομοίως, αυτό το JSX:

works on Y axis and

Και αυτό το XML:

works on X axis. Everything is mirrored for

Δημιουργήστε αυτό:

---

Για να επιτύχουμε τη σωστή θέση μέσα στο δοχείο, συνήθως χρησιμοποιούμε έναν συνδυασμό justifyContent, alignItems, και justifyContent ιδιότητες.

Αυτό το JSX:

space-around

Και αυτό το XML:

space-between

Θα δημιουργήσει αυτήν τη διάταξη:

---

Αυτό το JSX:

space-evenly

Και αυτό το XML

state

Θα δημιουργήσει αυτήν τη διάταξη:

---

Αυτό το JSX:

state

Και αυτό το XML:

render()

Θα δημιουργήσει αυτήν τη διάταξη:

---

Αυτό το JSX:

import React from 'react'; import {Button, Text, View} from 'react-native'; export default class App extends React.Component { /* Initialize state object with variable 'number' set to 0 and variable name with value of empty string */ state = {number: 0}; render() { return ( this.decrement()}/> {/* Text will be automatically updated whenever state.number has changed value */} Value = {this.state.number} this.increment()}/> ); } //Declaration of decrement function decrement() { //To update the state we need invoke this.setState //with new value for variable 'number' this.setState({number: this.state.number - 1}); } increment() { this.setState({number: this.state.number + 1}); } }

και αυτό το XML:

textView.setText('Value ' + number)

Θα δημιουργήσει αυτήν τη διάταξη:

---

Μάθημα που πρέπει να μάθουμε: εάν έχουμε yarn alignItems yarn add axios justifyContent npm flexDirection: στήλη '- npm install axios επηρεάζει τον άξονα Y και import React from 'react'; import { TextInput, View, Text, Image, ActivityIndicator, Platform, StyleSheet } from 'react-native'; import axios from 'axios'; TextInput = EditText, ActivityIndicator = ProgressBar Platform - Platform detecting module StyleSheet - Module for creating stylesheets and moving them away from JSX επηρεάζουν τον άξονα Υ.

justifyContent: 'flex-εκκίνηση'	βαρύτητα = 'έναρξη | αριστερά'
alignItems: 'flex-start'	βαρύτητα = 'έναρξη | αριστερά'
justifyContent: 'flex-end'	βαρύτητα = 'τέλος | δεξιά'
alignItems: 'flex-end'	βαρύτητα = 'τέλος | δεξιά'

Δοκιμάστε το μόνοι σας. Σετ export default class App extends React.Component { } τιμή σε state = {text: '', loading: false, error: null, imgUrl: null}; , TextInput, και Image.

Διαχείριση κράτους

Για την ενημέρωση της κατάστασης εφαρμογής, θα χρησιμοποιήσετε το React's render() { return ( //Predefined style. See below {/* returnKeyType ~ imeOptions onSubmitEditing ~ et.OnEditorActionListener */} this.setState({text})} onSubmitEditing={() => this.searchPicture()}/> {/* Render error Image component if this.state.imgUrl is not equal to null */} { this.state.imgUrl && } ); } μεταβλητός. Όποτε onChangeText={(text) => this.setState({text})} onSubmitEditing={() => this.searchPicture()} { this.state.imgUrl && } ενημερώνεται, EditText καλείται.

Αντιγράψτε τον παρακάτω κώδικα στην εφαρμογή σας:

TextWatcher

Εάν κάνετε κλικ στα κουμπιά ΔΙΑΚΡΙΣΗ και ΕΓΚΑΤΑΣΤΑΣΗ, θα δείτε ότι το κείμενο ενημερώνεται αυτόματα για εσάς. Δεν υπάρχει ανάγκη ρητής χρήσης et.OnEditorActionListener.

Η λειτουργικότητα της κατάστασης είναι βολική για πολλούς λόγους:

• Ευκολία απόκτησης της τιμής - γνωρίζετε πάντα πού και πώς να αποκτήσετε την τιμή για μια συγκεκριμένη μεταβλητή.
• Τα δεδομένα δεν δεσμεύονται σε συγκεκριμένα γραφικά στοιχεία.
• Έχοντας πολλά widget εξαρτάται από την κοινή αλλαγή τιμής.

Δημιουργία εφαρμογής αναζήτησης για / r / pics

Τώρα που έχουμε μια ιδέα στα βασικά, ας δημιουργήσουμε κάτι λίγο πιο περίπλοκο: μια εφαρμογή αναζήτησης για / r / pics. Το Reddit παρέχει ένα απλό τελικό σημείο JSON API, οπότε δεν θα χρειαστεί να κάνουμε δευτερεύουσες αναζητήσεις για να λάβουμε έλεγχο ταυτότητας για να λειτουργήσει σωστά.

Το React Native παρέχει ένα ενσωματωμένο Fetch API. Δεδομένου ότι οι περισσότεροι από εμάς είναι συνηθισμένοι Μετασκευή και την ευκολία χρήσης του, θα το χρησιμοποιήσουμε άξονες . Μπορείτε να εγκαταστήσετε άξονες μέσω μιας εντολής τερματικού

χρησιμοποιώντας searchPicture() (Η προτιμώμενη μέθοδος μου):

imgUrl

ή χρησιμοποιώντας this.state.imgUrl:

0

Εισαγωγές:

false

Δημιουργήστε την τάξη:

null

Για να προετοιμάσετε την κατάσταση. Θα χρειαστούμε:

• φόρτωση - Για εμφάνιση γραμμής προόδου.
• error - Για να δείξει εάν προέκυψε κάποιο σφάλμα κατά την υποβολή αιτήματος REST API.
• imgUrl - Για προεπισκόπηση της εικόνας που αναζητήσατε.
• κείμενο - ερώτημα αναζήτησης.

undefined

Προσθέστε τον κωδικό JSX. Έχουμε μια κάθετη διάταξη με searchPicture() { //Default state this.setState({loading: true, error: null, imgUrl: null}); axios.get('https://www.reddit.com/r/pics/search.json', { params: { //the get param map restrict_sr: 'on', //search only /r/pics limit: 1, //limit to one search item sort: 'new', //sort by creation date q: this.state.text //our search query } }).then(response => { //promise is resolved and 'then' block is triggered //set state with new values this.setState({ imgUrl: response.data.data.children[0] .data.preview.images[0].source.url, error: null, loading: false }) }).catch(error => {//Some error occurred //set error this.setState({error: error.message, loading: false, imgUrl: null}) }) } και ActivityIndicator συστατικά.

Image

Καινούργια πράγματα:

{ //Separate method this.renderProgress() } {/* Render error Text component if this.state.error is not equal to null */} { this.state.error && {this.state.error} }

Η πρώτη μέθοδος λειτουργεί παρόμοια με την render() με το renderProgress() { //If this.state.loading is true //return View containing a progressbar //View takes style array if (this.state.loading === true) { return ( ); } } συστατικό. Ας είμαστε ειλικρινείς, είναι πολύ καλύτερο στο React Native.

Η δεύτερη μέθοδος καλείται όταν πατηθεί το πλήκτρο επιστροφής στο πληκτρολόγιο (App) αφού ενεργοποιηθεί const styles = StyleSheet.create({ containerStyle: { flexDirection: 'column', flex: 1, //Since React Native is cross platform //let's handle both platforms. //Add top margin to fix status bar overlap marginTop: Platform.OS === 'ios' ? 20 : 0, }, textInputStyle: { marginLeft: 16, marginRight: 16, height: Platform.OS === 'ios' ? 30 : undefined } }); .

Η εικόνα αποδίδεται όταν TextInput δεν είναι μηδενική ή αόριστη δεδομένου ότι ο τελεστής «&&» δεν ελέγχει για δεύτερο όρισμα εάν το πρώτο είναι ήδη ψευδές.

Ίσως αναρωτιέστε γιατί autoFocus={true} prop είναι ψεύτικο. Λοιπόν, όταν χρησιμοποιείτε λογικούς τελεστές σε JavaScript, οτιδήποτε άλλο εκτός από το '' (μια κενή συμβολοσειρά), TextInput, ref={ref => this.searchInput = ref}, componentDidMount() ή componentDidMount(){ this.searchInput.focus(); } είναι αλήθεια. Δεν υπάρχει ανάγκη για συγκεκριμένο έλεγχο.

constructor()

Ορίστε. Η εφαρμογή θα πρέπει να λειτουργεί όπως αναμενόταν τώρα. Εισαγάγετε μια συμβολοσειρά αναζήτησης και πατήστε επιστροφή.

Επειδή η εφαρμογή μας είναι επίσης έτοιμη για απόδοση static _getDerivedStateFromProps_(props, state) και λάθη, πρέπει να προσθέσουμε λίγο περισσότερο κωδικό μετά το render() συστατικό:

componentDidMount()

Μπορείτε να μετακινήσετε στοιχεία απόδοσης εκτός της κύριας shouldComponentUpdate(nextProps, nextState) μέθοδος, επίσης:

render()

Το μόνο που μένει είναι στυλ. Βάλτε τα έξω από το getSnapshotBeforeUpdate(prevProps, prevState) τάξη.

componentDidUpdate(prevProps, prevState, snapshot)

Μπορούμε τώρα να προσθέσουμε μερικές επιπλέον τροποποιήσεις όπως το άνοιγμα του μαλακού πληκτρολογίου αυτόματα κατά την εκκίνηση της εφαρμογής.

Λάβετε υπόψη ότι υπάρχει ένας ευκολότερος τρόπος να κάνετε render() αυτόματη εστίαση (componentWillUnmount()), αλλά χάριν αυτού του παραδείγματος, δεν θα το χρησιμοποιούμε.

Προσθέστε αναφορά στο React.Component με στήριγμα:

./src

Και παράκαμψη CardView.js μέθοδος κύκλου ζωής όπως αυτή:

import React from 'react'; import {View} from 'react-native'; export default CardView = (props) => { return ( //Style will be merged from default containerStyle //and props.style. props.style attributes will override //values if parameters are same. {/* props.children contain subviews add this line if the component is container */} {props.children} ); }; const styles = { containerStyle: { borderRadius: 4, margin: 5, padding: 5, elevation: 5, shadowColor: 'black', shadowRadius: 5, shadowOpacity: 0.5, shadowOffset: {width: 0, height: 3}, backgroundColor: 'white' } };

Φορτώστε ξανά την εφαρμογή και το πληκτρολόγιο ανοίγει αυτόματα για εμάς.

Μέθοδοι κύκλου ζωής συστατικών

Έχουμε ήδη δημιουργήσει ένα στοιχείο, αλλά ας περάσουμε τη ζωή ενός στοιχείου.

Ακολουθεί η ροή κύκλου ζωής του React:

• LoginForm - Ο κατασκευαστής καλείται πάντα κατά την εκκίνηση της εφαρμογής
• CardView - Κλήθηκε πριν από την απόδοση και μετά την ενημέρωση. Επιστρέφει αντικείμενο για ενημέρωση της κατάστασης. Επιστρέψτε το null για να μην ενημερώσετε τίποτα.
• import React from 'react'; import {TextInput, Platform, Button, StyleSheet} from 'react-native'; import CardView from '../common/components/CardView'; export default class LoginForm extends React._Component _{ render() { return ( //Override default style console.log('onLoginPress')} buttonStyle={styles.buttonStyle}/> ); } } const styles = StyleSheet.create({ buttonStyle: { elevation: 5, height: 40 }, textInputStyle: { padding: 10, //Additional params to make //iOS inputs prettier ...Platform.select({ ios: { borderRadius: 2, marginTop: 5, backgroundColor: '#eeeeee' } }) } }); - Απαιτείται απόδοση για κάθε κατηγορία React Component. Χρησιμοποιείται για την απόδοση προβολής.
• LoginForm - Επικαλείται μετά την απόδοση του εξαρτήματος και την τοποθέτηση στο δέντρο προβολής.
• App - Κλήθηκε μετά από αλλαγή κατάστασης ή στηρίγματος. Η επιστροφή είναι προεπιλεγμένη σε true μετά από κάθε ενημέρωση κατάστασης. Επικαλείται View αν επιστρέψει αλήθεια.
• react-navigation - Κλήθηκε λίγο πριν δεσμευτεί η απόδοση.
• yarn - Κλήθηκε μετά από την απόδοση νέας ενημέρωσης. Δεν καλείται μετά την πρώτη npm.
• axios - Κλήθηκε λίγο πριν αποσυνδεθεί και καταστραφεί το στοιχείο.

Επαναχρησιμοποιήσιμα στοιχεία

Συχνά πρέπει να δημιουργούμε επαναχρησιμοποιήσιμα στοιχεία κατά την εργασία στο έργο. Υπάρχουν δύο τρόποι δημιουργίας ενός στοιχείου:

1. Δημιουργία τάξης που επεκτείνεται yarn. Αυτή η μέθοδος πρέπει να χρησιμοποιηθεί εάν χρειαζόμαστε μεθόδους κύκλου ζωής.
2. Γράφοντας μια συνάρτηση που επιστρέφει την προβολή για μια απλούστερη σύνταξη.

Εφόσον έχουμε ήδη δημιουργήσει κλάσεις Component, ας δημιουργήσουμε μια συνάρτηση για αυτήν την παρουσία.

Ας υποθέσουμε ότι χρειαζόμαστε ένα ανάλογο. Δημιουργήστε έναν 'κοινό' φάκελο στο npm Ευρετήριο.

Δημιουργία PictureList.js:.

import React from 'react'; import { ActivityIndicator, FlatList, Image, Text, TouchableHighlight, View } from 'react-native'; import axios from 'axios'; import CardView from '../common/CardView'; export default class PictureList extends React.Component { state = {loading: true, error: null, posts: null}; componentDidMount() { axios.get('https://www.reddit.com/r/pics.json') .then(response => { this.setState({ posts: response.data.data.children, loading: false }) }).catch(error => { this.setState({ error: error.message, loading: false }) }) } render() { return ( // FlatList ~ ListView // data - DataSource for the List // renderItem - function returns View item // keyExtractor - Unique id for items {this.state.posts && (item.data.id + '')}/>} {this.state.loading && } ); } navigateToPicture(title, url) { this.props.navigation.navigate('PicturePreview', { 'title': title, 'url': url }) } renderItem(item) { //Destructuring values from item //Read more 'ES6 destructuring' const {data} = item.item; const {title} = data; const {url} = data.preview.images[0].source; return ( //Clickable view this.navigateToPicture(title, url)}> {/Reusing our CardView/} {title} ) } }

PicturePreview.js χρησιμοποιώντας το νέο μας import React from 'react'; import {Image} from 'react-native'; export default class PicturePreview extends React.Component { //Destructure navigation //Set title to header static _navigationOptions = ({navigation}) => ({ title: navigation.state.params.title }); render() { const {url} = this.props.navigation.state.params; return () } } σχέδιο:

navigationOptions

Εισαγάγετε το StackNavigation τάξη στο import React from 'react'; import {createStackNavigator} from 'react-navigation'; import PictureList from './components/PictureList'; import PicturePreview from './components/PicturePreview'; export default class App extends React.Component { render() { return ( ); } } //Customize the header_ const NavigationOptions = { headerTintColor: '#fff', headerStyle: { backgroundColor: '#f4511e', } }; //Create the router. const Router = createStackNavigator({ //Name the screen 'PictureList': { //Link the Component screen: PictureList, //Additional navigation options navigationOptions: { title: '/r/pics Browser', ...NavigationOptions } }, 'PicturePreview': { screen: PicturePreview, navigationOptions: NavigationOptions } }, { //Root initialRouterName: 'PictureList' } ); τάξη και τυλίξτε το με

|_+_|

|_+_|

Εάν τροποποιήσετε τις παραμέτρους στα στυλ, μπορείτε να πάρετε κάτι που φαίνεται πολύ καλύτερο.

Πλοήγηση

Η πλοήγηση σε διαφορετικές σκηνές αποτελεί ουσιαστικό μέρος για τις περισσότερες εφαρμογές. Θα δημιουργήσουμε μια εφαρμογή προγράμματος περιήγησης Reddit / r / pics.

Η δημιουργία πλοήγησης στο React Native είναι αρκετά εύκολη.

Προαπαιτούμενα

• Εγκατάσταση

  |_+_|

  με
  ή

• Εγκατάσταση

  |_+_|

  με

  |_+_|

  ή

Ας ξεκινήσουμε δημιουργώντας δύο διαφορετικά στοιχεία.

Σημείωση: Το μεγαλύτερο μέρος του παρακάτω κώδικα πρέπει να είναι ήδη γνωστό σε εσάς. Θα επικολλήσω ολόκληρη την τάξη.

:

Το

θα καλείται αυτόματα από το React-Navigation.

Τώρα ας προχωρήσουμε Εφαρμογή

Σημείωση: Υπάρχουν πολλοί τύποι πλοήγησης στο React-Navigation. Σήμερα, θα επικεντρωθούμε στο

. Ανατρέξτε στον επίσημο ιστότοπο για λεπτομερείς πληροφορίες.

Όπως μπορείτε να δείτε, το μόνο που χρειάζεται να κάνουμε είναι να δημιουργήσουμε ένα δρομολογητή πλοήγησης και να δημιουργήσουμε το εφαρμογή δώστε το. Αν όλα πάνε καλά, θα έχουμε μια λειτουργική εφαρμογή προγράμματος περιήγησης Reddit / r / pics.

Android:

iOS:

Το React Native είναι καταπληκτικό!

Από τότε που άρχισα να προγραμματίζω, είχα καθαρά κινητές εμπειρίες ανάπτυξης. Αλλά τώρα μπορώ να κωδικοποιήσω για σχεδόν οτιδήποτε με το React: κινητό, επιτραπέζιο υπολογιστή και ιστό.

Εάν αποφασίσετε να ξεκινήσετε να αναπτύσσετε την επόμενη εκπληκτική εφαρμογή σας χρησιμοποιώντας Αντιδράστε εγγενείς , θα διαπιστώσετε ότι έχει τις ιδιότητές του και κάποια σφάλματα εδώ και εκεί, αλλά το React Native είναι πολύ λειτουργικό και ιδανικό για τα περισσότερα έργα.

Σχετίζεται με: Δημιουργήστε έναν σαρωτή QR: Ένα React Native Camera Tutorial

Κατανόηση των βασικών

Τι εννοείς με το IDE;

Ολοκληρωμένο περιβάλλον ανάπτυξης ή πρόγραμμα επεξεργασίας κώδικα.

Ποιες εφαρμογές χρησιμοποιούν το React Native;

Πολλές δημοφιλείς εφαρμογές χρησιμοποιούν το React Native συμπεριλαμβανομένων των Facebook, Tesla, Skype, Instagram, Uber κ.λπ.

Ποια γλώσσα προγραμματισμού χρησιμοποιεί το React Native;

JavaScript

Πώς σχεδιάζετε το περιβάλλον εργασίας χρήστη στο React Native;

Το Flexbox είναι ο τρόπος δημιουργίας διατάξεων στο React Native.

Είναι το React Native εγγενές ή υβριδικό;

Εν ολίγοις, κανένα. Ο προγραμματισμός κώδικα για το React Native, το οποίο είναι JavaScript, δεν είναι πραγματικά μεταγλωττισμένο σε Java ή Swift / Objective C. Επομένως, χρειάζεται ακόμα μηχανή JavaScript για να εκτελεστεί. Ωστόσο, το περιβάλλον χρήστη χρησιμοποιεί εγγενή στοιχεία, οπότε είναι εγγενές για τη διεπαφή χρήστη.

Είναι το React Native ένα πλαίσιο;

Ναί. Το React Native είναι ένα πλαίσιο για τη δημιουργία εφαρμογών που έχουν Native UI.