Home » Apps » Guide: Lav apps til mobilen
Guide: Lav apps til mobilen

Guide: Lav apps til mobilen

Share

Hvordan de to skærme er inkluderet i selve appen er vist i infoboks “Navigation”. Du kan se de to klassenavne (RenderList og ClickedItem).

Har du brug for at sætte noget op, når et objekt oprettes, kan du gøre det i metoden componentDidMount(). I boksen nedenfor kan du se, hvordan oversigtskærmens (RenderList) componentDidMount() ser ud. Det er værd at bemærke tre ting.

Hent oversigt

componentDidMount() {
fetch(‘https://api.rss2json.com/v1/api.json
?rss_url=https%3A%2F%2Fwww.altomdata.dk%2Ffeed’, {
method: ’GET’,
headers: {
Accept: ’application/json’,
’Content-Type’: ’application/json’,
}
})
.then((response) => response.json())
.then((responseJson) => {
return responseJson.items;
})
.then((newsItems) => {
this.setState({ dataSource: ds.cloneWithRows(newsItems) },
() => { this.setState({ loading: false }) });
});
}
Infoboks – Vis oversigt
render() {
return(
<View style = { styles.container1 }>
{
(this.state.loading)
?
(<ActivityIndicator size = “large”/>)
:
(<ListView style = {{ alignSelf: ‘stretch’ }}
dataSource = { this.state.dataSource }
renderRow = { (rowData) =>
<TouchableOpacity style = { styles.item }
activeOpacity = { 0.4 }
onPress = { this.clickedItemText.bind(this, rowData) }>
<Text style = { styles.text }>{ rowData.title }</Text>
</TouchableOpacity>
}
renderSeparator = {() =>
<View style = { styles.separator }/>
}
enableEmptySections = { true }/>
)}
</View>
);
}

Infoboks – “Navigation”
const AppNavigator = createStackNavigator({
List: { screen: RenderList },
Item: { screen: ClickedItem }
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

Infoboks – “Vis artikel”
render() {
return(
<WebView style = { styles.container2 }
source={{uri: this.props.navigation.state.params.item.link }}
/>
);
}

For det første den udbredte brug af promises (se f.eks. https://javascript.info/promise-basics), som i dag er meget udbredt blandt JavaScript-udviklere. For det andet er der et lille trick. Websiden sender XML tilbage, men det er svært at håndtere i JavaScript. Ved brug af en ekstern tjeneste, er det muligt at få det oversat til JSON (JavaScript Object Notation), som er meget lettere at arbejde med. Sluttelig er det værd at bemærke, at objektets tilstand (this.setState()) sættes med resultatet.

Se også:  De 25 bedste apps til Windows 10

I infoboks “Vis oversigt” kan du se, hvor oversigten vises. Metoden render() genererer brugergrænsefladen, og vi har her valgt at bruge ListView, som er en meget enkel liste. Som du kan se, vil den reagere, når du trykker på en række (onPress = { … }). Det beskriver, hvilken funktion, der kaldes, når du trykker.

Visning af en artikel samt nyhedsoversigten kan ses i både iOS-simulatoren og Android-emulator (iOS-versionen vist ovenfor).

Visning af en artikel samt nyhedsoversigten kan ses i både iOS-simulatoren og Android-emulator (iOS-versionen vist ovenfor).

Selve visningen af en artikel udføres af klassen ClickedItem. Det er let, idet det overlades til WebView som komponent, der kan vise HTML/CSS (altså den centrale komponent af en webbrowser). I infoboks “Vis artikel” kan du se, hvordan metoden render() bruger den URL, som er sat som prop, til at hente og vise en artikel.

Se også:  Guide: Lav robotter med Raspberry Pi
Afslutning

Denne artikel er et forsøg på at give dig en meget kort introduktion til React Native. Der er skrevet mange bøger om emnet, og du kan finde mange tutorials rundt om på internettet.

Et af de største kritikpunkter er, at React Native har en kopi af hele brugergrænsefladen i hukommelsen. For en kompleks app med mange skærme og meget funktionalitet kan det give problemer. Ingen bruger bliver glad, når en app lukkes ned af styresystemet pga. manglende hukommelse.

Desværre virker hele udviklingsmiljøet til tider en smule ustabilt. Det kan være nødvendigt at stoppe det og køre npm start igen.

Umiddelbart er det enhver programmørs drøm at kunne skrive en app én gang og bruge den på flere platforme. React Native (og Expo) indfrier det, men prisen kan være høj. Har du tidligere arbejde med JavaScript, kan React Native være din vej mod alverdens smartphones.

TAGS
apps
javascript
programmering

DEL DENNE
Share

Seneste Tech test
Seneste konkurrencer

Mest populære
Populære
Nyeste
Tags

Find os på de sociale medier

Modtag dagligt IT-nyhedsbrev

Få gratis tech-nyheder i din mail-indbakke alle hverdage. Læs mere om IT-UPDATE her

Find os på FaceBook

Alt om DATA

Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
redaktion@altomdata.dk

Datatid TechLife

Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
redaktion@datatid.dk

Audio Media A/S

CVR nr. 16315648,
Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
info@audio.dk
Annoncesalg / Prislister:
Lars Bo Jensen: lbj@audio.dk Telefon: 33 74 71 16
Annoncer: Medieinformation


Alt om DATA, Datatid TechLife  © 2019
Privatlivspolitik og cookie information - Audio Media A/S