React-native - Beginnen
Home

React-native - Beginnen

React-native - Beginnen

React-native is een open-source bibliotheek en maakt gebruik van React waarmee we native applicaties kunnen schrijven. Het is eigenlijk een implementatie van React voor iOS en Android.

React Native code heeft veel gemeen met React. Alleen de interface verschilt en dus kunnen we veel code tussen web- en native applicaties, geschreven in respectievelijk React en React Native, delen. De business logica kunnen we delen, maar we moeten er wel deze logica scheiden van de UI. Dit kunnen we doen door een goede architectuur te bedenken of door externe libraries als Redux te gebruiken.

Stappenplan

  1. React Native installeren
    1. Getting Started, en kies Building Projects with Native Code.
    2. Os Windows, target Android:
      1. Node installeren (zonder Chocolatey), minimum Node 8.3.
      2. Installeer Java SE Development Kit (JDK) De Java JDK installeren.
      3. The React Native CLI activeren:
        npm install -g react-native-cli

      4. Volg de instructies om de Android ontwikkelingsomgeving te installeren.
        1. Hef eventueel de beperking op om alleen app's vanuit de Windows Store te installeren.
        2. Importeer geen instellingen vanuit een vorige installatie.
      5. Een React Native app maken.
      6. Een Android toestel gereed maken.
      7. Bij de SDK Components Setup vink je Adroid SDK Platform en Android Virtual Device aan.
    3. Visual Code
      1. Installeren
      2. Extensies
        1. Esben Petersen, Prettier - Code formatter, 31-1-2019
        2. Dirk Baeumer, ESLint, documentatie ESLint (geeft problemen, nog niet opgelost)
      3. Rare foutmeldingen negeren:
        vc - disable JavaScript validate
        vc - disable JavaScript validate
  2. Xavier Lefèvre, Add custom icons to your React Native application, Feb 8, 2017
  3. Running On Simulator iOS
  4. Op een toestel runnen:
    1. apple id beheren
    2. Running On Device iOS
  5. Saurabh Mhatre, Reading data from json files in react native, Jan 12, 2017

  6. AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

  7. react-native-keychain

  8. Krunal, JSON Server in React Native, Aug 23, 2018

Elementen

  1. De React Native Button is zeer beperkt wat lay-out mogelijkheden, zie daarvoor Button. Het Button element beschikt niet over een style prop, en je kan de tekst op de knop niet instellen via de "web-way" zoals <Button>Verzenden</Button> maar via de title eigenschap <Button title="Verzenden" />
    Om meer controle te hebben over de lay-out gebruik je beter één van de TouchableXXXX componenten, bijvoorbeeld TouchableOpacity Deze zijn zeer gemakkelijk te gebruiken.
  2. Navigatie
    1. Packages installeren: React Navigation Getting started
    2. Hello React Navigation
    3. Parameters doorgeven, navigator props genoemd. We hebben 1 index-procedure component. De procedures die getoond worden geven we als een lijst mee:
      const AppNavigator = createStackNavigator(
        {
          //First entry by default be our first screen if we do not define initialRouteName
          HomeIndex: {
            screen: IndexProcedure,
            params: { index: homeIndexProcedureData }
          },
          FireIndex: {
            screen: IndexProcedure,
            params: { index: fireIndexProcedureData }
          },
          AccidentIndex: {
              screen: IndexProcedure,
              params: {index: accidentIndexProcedureData}
          },
          TerrorIndex: {
              screen: IndexProcedure,
              params: {index: terrorIndexProcedureData}
          },
          PsychoSocialRiskIndex: {
              screen: IndexProcedure,
              params: {index: psychoSocialRiskIndexProcedureData}
          }
        },
        {
          initialRouteName: "HomeIndex"
        }
      );
    4. Parameters in het target scherm ophalen:

      class IndexProcedure extends Component {
        render() {
          /* 2. Get the param, provide a fallback value if not available */
          const { navigation } = this.props;
          const index = navigation.getParam("index", "NO-CODE");
          return (
            <View style={homeStyle.container}>
              <ScrollView>
                {index.map(procedure => (
                  <TouchableOpacity
      
      
    5. withNavigation

      withNavigation is a higher order component which passes the navigation prop into a wrapped component. It's useful when you cannot pass the navigation prop into the component directly, or don't want to pass it in case of a deeply nested child.
      withNavigation(Component) returns a Component.

  3. ScrollView
    1. React Native - ScrollView Tutorials Point
  4. Lists
    1. Krunal, React Native FlatList Example, Aug 23, 2018
  5. Login
    1. Instamobile, Login Screen React Native
  6. Ouder en kindercomponenten
    1. Per definitie is state niet toegankelijk van buiten de component. En het is niet aan te bevelen props naar state te kopiëren.
      In de boomstructuur van uw componen moet je het geselecteerde item als state instellen in de bovenliggende component (niet in de component zelf).
      En geef de geselecteerde ID door aan elke component als een prop
      In de child render kun je zoiets doen:br/> let itemIsSelected = (this.props.itemId == this.props.selectedId);
      En geef een methode door van boven naar onder, en voeg dat toe als:
      onClick = {() => this.props.setSelected (this.props.itemId)}
      In de officiële documenten Thinking in React is er een goede uitleg over hoe je componenten structureert. Dit kan handig zijn om te bepalen of iets state of props moet zijn, of dat dingen beter kunnen worden beheerd binnen het kind of de ouder.
  7. Telefoneren
    1. Tiaan du Plessis, react-native-phone-call, oktober 2018

    2. Snehal Agrawal, Example to Make a Phone Call in React Native App, September 12, 2018
  8. SMS
    1. Example to Send Text SMS on Button Click in React Native

JI
2019-03-16 10:19:55