Slyšeli jste o React native a Expo? Vytváření desktopu je skvělé, ale co vytváření mobilních aplikací? Co když nemáte přístup k zařízení Android nebo Apple. Nebo se nechcete učit Swift nebo Java. To není problém. React native a Expo vám umožní vytvářet mobilní aplikace na jakékoli platformě pro jakoukoli platformu. Tento tutoriál vám ukáže, jak na to.
Získejte tuto úvodní šablonu na GitHubu.
Nastavení projektu Pt.1
Než začnete pracovat na samotné aplikaci, je třeba udělat několik věcí. Budete muset vytvořit několik konfiguračních souborů. Tyto soubory jsou package.json , babel.config.js a app.json . Poté byste také měli vytvořit .gitignore , alespoň pokud plánujete používat git. Při každém spuštění projektu se automaticky vygenerují některé soubory. Tyto soubory nemusí být součástí git. Začněme tímto souborem.
# ./.gitignore
node_modules/**/*
.expo/*
npm-debug.*
*.jks
*.p12
*.key
*.mobileprovision
Dále budete muset nainstalovat některé závislosti, aby se tento projekt zprovoznil. Nyní, abyste mohli použít tyto závislosti a spustit tento projekt, budete také potřebovat několik skriptů npm. Tyto skripty zahrnují skripty pro vývoj, vysunutí a testování. Ve skutečnosti budou existovat tři skripty pro vývoj – „výchozí“, jeden pro Android a jeden pro iOS.
Nyní budete muset zadat main nebo položka aplikace. Poté byste měli také zadat předvolbu pro jest . Odpověď na druhou věc je jest-expo . A pro první? Budete používat AppEntry.js od expo modul. Nyní jste připraveni nainstalovat všechny závislosti s přízí nebo npm. Takže npm install nebo yarn .
Kromě toho budete pravděpodobně muset nainstalovat expo-cli . A tuto závislost byste měli nainstalovat globálně.
// ./package.json
{
"main": "node_modules/expo/AppEntry.js",
"private": true,
"jest": {
"preset": "jest-expo"
},
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"dependencies": {
"expo": "^31.0.2",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^2.18.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
}
}
Nastavení projektu Pt.2
To byla první část. Zbývají dva poslední kroky. Nejprve budete muset vytvořit babel.config.js aby se ujistil, že je kód transpilován, měl by být. Za druhé, vaše aplikace bude potřebovat konfiguraci ve formě JSON. Toto bude hlavní konfigurační soubor pro Expo pro nastavení vaší aplikace a její správné fungování. Začněme s babel.config.js .
// ./babel.config.js
module.exports = function(api) {
api.cache(true)
return {
presets: ['babel-preset-expo']
}
}
Poté dáme dohromady hlavní konfigurační soubor pro Expo. Až budete s tímto souborem hotovi, je čas začít pracovat na samotné aplikaci.
// ./app.json
{
"expo": {
"name": "react-native-app",
"slug": "react-native-app",
"privacy": "public",
"sdkVersion": "31.0.0",
"platforms": [
"ios",
"android"
],
"version": "0.0.1",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
}
}
}
Poznámka:Jak jste si možná všimli, v konfiguraci Expo jsou zmíněny dva externí zdroje. Jmenovitě ‚ikona‘ a ‚obrázek‘ uvnitř ‚splash‘. Všechny potřebné informace, které potřebujete k vytvoření vlastního úvodního obrázku, jsou v [dokumentaci úvodních obrazovek Expo]. A pokud jde o ikonu, přejděte na [dokumentace aplikace ikony Expo]. Poté vytvořte ./assets/images/ adresář a vložte tam svou ikonu a úvodní obrázek.
Přidání některých konstant
Když vytváříte svou nativní aplikaci React, možná budete chtít znovu použít některé věci. Můžete například chtít použít stejné barvy. Je to velmi dobrý nápad, aby byl design a styl vaší aplikace konzistentní. Vytvořme tedy novou složku s názvem constants v kořenu. Poté v této složce vytvořte nový soubor s názvem Colors.js .
Zde můžete přidat barvy pro výchozí scénáře a stavy. Například chyby, aktivní prvky, varování, upozornění, odstíny barev a tak dále. A nezapomeňte exportovat svou paletu barev.
// ./constants/Colors.js
const tintColor = '#2f95dc'
export default {
tintColor,
tabIconDefault: '#ccc',
tabIconSelected: tintColor,
tabBar: '#fefefe',
errorBackground: 'red',
errorText: '#fff',
warningBackground: '#eaeb5e',
warningText: '#666804',
noticeBackground: tintColor,
noticeText: '#fff'
}
Poté můžete také chtít mít nějaké obecné konstanty. Například konstanty pro width a height zařízení, na kterém vaše aplikace běží. Vytvořme tedy ještě jeden soubor ve stejném adresáři s názvem Layout.js . Zde můžete použít Dimensions modul poskytovaný React native pro získání width a height zařízení. Poté se znovu ujistěte, že tyto konstanty exportujete.
// ./constants/Layout.js
// Import 'Dimensions' module from 'react-native'
import { Dimensions } from 'react-native'
// Create constants for app width and height
const width = Dimensions.get('window').width
const height = Dimensions.get('window').height
// Export everything
export default {
window: {
width,
height
},
isSmallDevice: width < 375
}
Vytvoření jednoduché komponenty
Nyní vytvoříme jednoduchou komponentu. Může to být ikona, která bude na navigační liště nebo na liště klepnutí. Nedělejte si starosti. Nemusíte si vytvářet vlastní ikonu od začátku. Můžete použít Icon modul od Expo a přizpůsobte si jej podle svého vkusu a potřeb. Níže je jednoduchý příklad takové ikony. Můžete tomu říkat TabBarIcon a vložte jej do nového adresáře s názvem components .
// ./components/TabBarIcon.js
// Import React and 'Icon' module from 'Expo'
import React from 'react'
import { Icon } from 'expo'
// Import color constants
import Colors from '../constants/Colors'
// Create, and export, component for navigation icon
export default class TabBarIcon extends React.Component {
render() {
return (
<Icon.Ionicons
name={this.props.name}
size={26}
style={{ marginBottom: -3 }}
color={this.props.focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
)
}
}
Vytvoření navigační lišty
V liště pro klepnutí máte komponentu pro ikonu, ale zatím nemáte žádnou lištu karet. Pojďme to postavit. Opět je to jednodušší, protože React native udělá většinu těžkých břemen za vás. Začnete importem Reactu a jednoho užitečného modulu z nativního Reactu s názvem Platform . Tento modul vám pomůže rozpoznat, na jaké platformě, konkrétně OS, vaše aplikace běží.
Tyto informace pak můžete použít k výběru konkrétní ikony pro iOS i Android. Poté budete také muset importovat createStackNavigator
a createBottomTabNavigator od react-navigation . Použijete createStackNavigator určit, která součást obrazovky se má na jaké obrazovce zobrazit. Potom použijete createBottomTabNavigator vytvořit a exportovat jednoduchý panel karet ve spodní části obrazovky.
Tato dotyková lišta pak vám a uživatelům vaší aplikace umožní přepínat mezi různými obrazovkami aplikace nebo trasami. To také znamená, že toto je místo, kam importujete všechny součásti obrazovky pro nativní aplikaci React.
// ./navigation/MainTabNavigator.js
// Import React and all necessary modules
import React from 'react'
import { Platform } from 'react-native'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
// Import screens
import HomeScreen from '../screens/HomeScreen'
import AboutScreen from '../screens/AboutScreen'
import SettingsScreen from '../screens/SettingsScreen'
// Import TabBarIcon component
import TabBarIcon from '../components/TabBarIcon'
// Add stack for Home screen
const HomeStack = createStackNavigator({
Home: HomeScreen // Specify component for each screen
})
// Add stack for About screen
const AboutStack = createStackNavigator({
About: AboutScreen // Specify component for each screen
})
// Add stack for Settings screen
const SettingsStack = createStackNavigator({
Settings: SettingsScreen // Specify component for each screen
})
// Create and setup navigation item for Home screen
HomeStack.navigationOptions = {
tabBarLabel: 'Home', // Text shown below the icon in tap bar
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? `ios-home` : 'md-home'}
/>
)
}
// Create and setup navigation item for Settings screen
SettingsStack.navigationOptions = {
tabBarLabel: 'Settings', // Text shown below the icon in tap bar
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
)
}
// Create and setup navigation item for About screen
AboutStack.navigationOptions = {
tabBarLabel: 'About', // Text shown below the icon in tap bar
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-information-circle' : 'md-information-circle'}
/>
)
}
// Export stacks for all app screens
export default createBottomTabNavigator({
HomeStack,
AboutStack,
SettingsStack
})
Vytvoření jednoduchého navigačního přepínače pro směrování
Zbývá poslední věc k dokončení směrování vaší nativní aplikace React. Musíte vytvořit přepínač navigátoru. Hlavním úkolem tohoto přepínače je zobrazit vždy pouze jednu obrazovku. K tomu použijete formulář modulu react-navigation s názvem createSwitchNavigator . Tento modul se o vše postará.
Kromě toho budete také importovat React a MainTabNavigator komponentu, kterou jste vytvořili v předchozí části, klepněte na lištu. Vytvoření navigačního přepínače bude snadné a rychlé. Budete potřebovat pouze tři řádky kódu. V podstatě určíte, že MainTabNavigator součástí je hlavní spínač navigátoru. Poté jej jako obvykle exportujte.
// ./navigation/AppNavigator.js
// Import React and 'createSwitchNavigator' module from 'react-navigation'
import React from 'react'
import { createSwitchNavigator } from 'react-navigation'
// Import main navigation
import MainTabNavigator from './MainTabNavigator'
// Create, and export, navigator switch
export default createSwitchNavigator({
Main: MainTabNavigator
})
Vytvoření komponenty aplikace
Nyní dáme dohromady hlavní komponentu aplikace. Tato součást bude velmi jednoduchá. Bude obsahovat pouze jeden view , vaše AppNavigator komponenta a výchozí StatusBar pokud vaše nativní aplikace React běží na platformě iOS. Zobrazení je hlavním stavebním kamenem uživatelského rozhraní vaší aplikace. Pokud jste obeznámeni s vývojem webu, můžete si to představit jako div .
Jako obvykle začnete importováním Reactu a vašeho AppNavigator komponent. A co zbytek? Opět není třeba vše psát sám. Místo toho můžete importovat všechny potřebné komponenty uživatelského rozhraní jako moduly z nativní knihovny React. A můžete také přidat několik jednoduchých stylů. A jako vždy, až budete hotovi, nezapomeňte exportovat App komponenta.
// ./App.js
// Import React and necessary UI modules
import React from 'react'
import { Platform, StatusBar, StyleSheet, View } from 'react-native'
// Import main navigation
import AppNavigator from './navigation/AppNavigator'
// Add some simple styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
}
})
// Create and export the main App component
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
{/* If app is running on iOS, show default status bar */}
{Platform.OS === 'ios' && <StatusBar barStyle="default" />}
{/* Show main app tap bar */}
<AppNavigator />
</View>
)
}
}
Domovská obrazovka
Dobře, pojďme vytvořit vaši první obrazovku. Nejprve importujte React a všechny komponenty uživatelského rozhraní, které chcete použít, z nativního Reactu. Samotná domovská obrazovka může být jednoduchá. Stačí nějaký nadpis. Spolu s některými styly, aby obrazovka vypadala pěkně. Můžete také zobrazit oznámení, že je vaše aplikace ve vývojovém nebo produkčním režimu.
Normálně pomocí view jako hlavní nádoba by stačila. Pokud však chcete přidat něco dalšího, může být dobré použít také ScrollView komponent. To vám nebo jinému uživateli umožní rolování. Pokud chcete tuto komponentu používat, ujistěte se, že je vnořena do view . Dokončete komponentu pro domovskou obrazovku jejím exportem.
Jedna věc. Jak uvidíte, vaše komponenta obrazovky obsahuje statický objekt nazvaný navigationOptions . To vám umožní použít záhlaví nad zbytkem obsahu na aktivní obrazovce. K tomu stačí použít nějaký text. Pokud chcete tuto hlavičku zakázat, nastavte ji na null .
// ./screens/HomeScreen.js
// Import React, necessary UI modules from React native
import React from 'react'
import { ScrollView, StyleSheet, Text, View } from 'react-native'
// Add some simple styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff'
},
developmentModeText: {
marginBottom: 20,
color: 'rgba(0, 0, 0, .4)',
fontSize: 14,
lineHeight: 19,
textAlign: 'center'
},
contentContainer: {
paddingTop: 30,
},
welcomeContainer: {
alignItems: 'center',
marginTop: 10,
marginBottom: 20
},
getStartedContainer: {
alignItems: 'center',
marginHorizontal: 50
},
welcomeText: {
fontSize: 21,
fontWeight: '700'
}
})
// Create and export Home screen component
export default class HomeScreen extends React.Component {
static navigationOptions = {
header: null // disable app header
}
// Show notification about mode
showDevelopmentModeWarning() {
if (__DEV__) {
return (
<Text style={styles.developmentModeText}>
Development mode is enabled, your app will be slower but you can use useful development
tools.
</Text>
)
} else {
return (
<Text style={styles.developmentModeText}>
You are not in development mode, your app will run at full speed.
</Text>
)
}
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
<View style={styles.welcomeContainer}>
<Text style={styles.welcomeText}>Welcome!</Text>
</View>
<View style={styles.getStartedContainer}>
{this.showDevelopmentModeWarning()}
</View>
</ScrollView>
</View>
)
}
}
O obrazovce
O obrazovce může být další užitečná obrazovka. Můžete jej použít k tomu, abyste uživateli své aplikace poskytli další užitečné informace. Můžete například zobrazit ikonu své aplikace, její název, slimák a popis. Můžete také zobrazit své jméno a verzi své aplikace. Pojďme na to.
// ./screens/AboutScreen.js
// Import React and necessary UI modules
import React from 'react'
import { Text, ScrollView, StyleSheet, View } from 'react-native'
import { Icon } from 'expo'
// Add some simple styles
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#fff'
},
aboutTitleContainer: {
paddingHorizontal: 15,
paddingBottom: 15,
paddingLeft: 8,
flexDirection: 'row'
},
aboutTitleIconContainer: {
marginRight: 15,
paddingTop: 2
},
aboutNameText: {
fontSize: 18,
fontWeight: '600'
},
aboutSlugText: {
fontSize: 14,
color: '#a39f9f',
backgroundColor: 'transparent'
},
aboutDescriptionText: {
marginTop: 4,
fontSize: 13,
color: '#4d4d4d'
},
aboutHeaderContainer: {
paddingVertical: 8,
paddingHorizontal: 15,
backgroundColor: '#fbfbfb',
borderWidth: 1,
borderColor: '#ededed'
},
aboutHeaderText: {
fontSize: 14
},
aboutContentContainer: {
paddingTop: 8,
paddingBottom: 12,
paddingHorizontal: 15
},
aboutContentText: {
color: '#808080',
fontSize: 14
}
})
// Create and export About screen component
export default class AboutScreen extends React.Component {
static navigationOptions = {
title: 'About' // Enable app header and use 'About' as the label
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.aboutTitleContainer}>
<View style={styles.aboutTitleIconContainer}>
<Icon.Ionicons
name="ios-home"
size={60}
/>
</View>
<View style={styles.aboutTitleTextContainer}>
<Text style={styles.aboutNameText} numberOfLines={1}>
react-native-app
</Text>
<Text style={styles.aboutSlugText} numberOfLines={1}>
react-native-app
</Text>
<Text style={styles.aboutDescriptionText}>
Your first cool Reactive Native app.
</Text>
</View>
</View>
<View>
<View style={styles.aboutHeaderContainer}>
<Text style={styles.aboutHeaderText}>
App name
</Text>
</View>
<View style={styles.aboutContentContainer}>
<Text style={styles.aboutContentText}>
react-native-app
</Text>
</View>
</View>
<View>
<View style={styles.aboutHeaderContainer}>
<Text style={styles.aboutHeaderText}>
Author
</Text>
</View>
<View style={styles.aboutContentContainer}>
<Text style={styles.aboutContentText}>
John Doe
</Text>
</View>
</View>
<View>
<View style={styles.aboutHeaderContainer}>
<Text style={styles.aboutHeaderText}>
Version
</Text>
</View>
<View style={styles.aboutContentContainer}>
<Text style={styles.aboutContentText}>
0.0.1
</Text>
</View>
</View>
</ScrollView>
)
}
}
Obrazovka Nastavení
Vezměme vaši nativní aplikaci React o něco dále. Jak? Můžete vytvořit jednoduchou obrazovku nastavení s funkčními přepínači. Tyto přepínače pak umožní povolit nebo zakázat funkce, které budete chtít vytvořit později. Dobrou zprávou je, že i budování těchto přepínačů bude rychlé. Ano, nativní knihovna React má vše, co potřebujete.
Jediné, co musíte udělat, je importovat prvek uživatelského rozhraní nebo modul, který chcete použít, Switch . A pro správu stavů zapnutí/vypnutí těchto přepínačů? Můžete použít React state pomocí jednoduché metody změnit stav přepínačů z true na false nebo naopak.
// ./screens/SettingsScreen.js
// Import React and necessary UI modules
import React from 'react'
import { Text, ScrollView, StyleSheet, Switch, View } from 'react-native'
// Import color constants
import Colors from '../constants/Colors'
// Add some simple styles
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#fff'
},
switchContainer: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 16,
paddingHorizontal: 15
},
switchLabel: {
flex: 0
}
})
// Create and export Settings screen component
export default class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'Settings' // Enable app header and use 'Settings' as the label
}
// Define default states for switch components
state = {
isOptionOneEnabled: false,
isOptionTwoEnabled: false,
isOptionThreeEnabled: false,
isOptionFourEnabled: false
}
// Handle change of switch state
handleSwitch = (option) => {
this.setState({
[option]: !this.state[option]
})
}
render() {
return (
<ScrollView style={styles.container}>
<View style={styles.switchContainer}>
<Text style={styles.switchLabel}>
Option 1
</Text>
<Switch trackColor={{true: Colors.tintColor}} onValueChange={() => this.handleSwitch('isOptionOneEnabled')} value={this.state.isOptionOneEnabled} />
</View>
<View style={styles.switchContainer}>
<Text style={styles.switchLabel}>
Option 2
</Text>
<Switch trackColor={{true: Colors.tintColor}} onValueChange={() => this.handleSwitch('isOptionTwoEnabled')} value={this.state.isOptionTwoEnabled} />
</View>
<View style={styles.switchContainer}>
<Text style={styles.switchLabel}>
Option 3
</Text>
<Switch trackColor={{true: Colors.tintColor}} onValueChange={() => this.handleSwitch('isOptionThreeEnabled')} value={this.state.isOptionThreeEnabled} />
</View>
<View style={styles.switchContainer}>
<Text style={styles.switchLabel}>
Option 4
</Text>
<Switch trackColor={{true: Colors.tintColor}} onValueChange={() => this.handleSwitch('isOptionFourEnabled')} value={this.state.isOptionFourEnabled} />
</View>
</ScrollView>
)
}
}
Epilolog:React Native &Expo – Jak vytvořit svou první mobilní aplikaci
gratuluji! Právě jste vytvořili svou vlastní mobilní aplikaci s React native a Expo! Doufám, že se vám tento tutoriál líbil, bavili jste se a hodně se naučili. To byl však jen začátek vaší cesty. Je toho mnohem mnohem víc. Takže, kam se odtud vydat? Jsou dvě místa, kam byste měli jít. První z nich je Expo Documentation.
Druhým je dokumentace pro React native. Tato dvě místa obsahují všechny informace, které potřebujete, abyste svou nativní aplikaci React posunuli na jinou úroveň. Proč zůstat jen u toho, co jste se dnes naučili. Nyní víte, jak používat React native a Expo k vytvoření úžasné aplikace, kterou jste vždy chtěli mít. Takže pokračujte a postavte to!