Learning React Native, Chapter 4: Components for Mobile

Analogies Between HTML and Native Components

Many of the React Native components are directly comparable to their HTML counterparts.  While they are similar, they they are not interchangeable.  You cannot share UI code between React on the web and React Native.  The JavaScript code is shareable as long as it only contains JavaScript.  You should put all your business logic in their own files to make converting your code from one to the other much easier. 

The Component

In React Native, text has to be enclosed in tags.  These are similar to the or tags you may be used to in HTML.

The Component

The component is almost the same as the HTML tag.  The Image component has a source property.  The source can be local or it can a remote resource.  

Working with Touch And Gestures

React Native provides API's for using touch and gestures. 

Creating Basic Iterations with

Button component is a simple API, it allows the setting of color, label text, and callback functions.

Using Component

Any element that responds to a user's touch, should probably be wrapped in .  This will cause an overlay to appear, giving the user visual feedback.  This is what helps to distinguish React Native as a native app, versus a web frame.  The general rule is to use whenever you would create a button or a link on a website.    has hooks for mobile gestures (i.e., onPressIn, onLongPress, ....)

Using the Pan Responder Class

PanResponder is a class provided by React Native, it is not a component.  Create a PanResponder object and attach it to the components render method.  There are six callbacks we have to register:
  • onStartShouldSetPanResponder
  • OnMoveShouldSetPanResponder
  • onPanResponderGrant
  • onPanResponderMove
  • onPanResponderRelease
  • onPanResponderTerminate
There is a really good tutorial on how to set this all up, and will allow you to learn a lot more about this class and how to use it.

Choosing how to handle touch

For simple implementations, should suffice for almost every case.  If you need to implement your own custom interfaces, then the PanResponder class is the only way to go.

Working with Lists

 ReactNative provides two API's for lists. 
is for data that can be broken into logical segments.  You can also use a .

Using the Basic Component

The component requires two properties (data and renderItem).  Data should be an array with a unique key property and (of course) whatever data you wish to display.  
RenderItem should be a function that builds a component from one element of the data array. renderItem gets passed an object via the item property, this allows you to do things like data.item.key.

Updating the Contents

We are going to build an app that displays the New York Times bestseller list with the book title, author and cover.  We build several different functions, and some mock data we can use to test our app with. 

Integrating Real Data

This section contains the functions we need to make our API call, and get the real data from the New York Times API.

Working with

is designed for items that are mostly the same plus sectional headings.  expects a props sections, renderItem, and renderHeaderSection.  Sections are arrays that contain the section data, each section must contain the title and data keys.  

Navigation

Code that allows users to transition from one screen to another.  There are several different generic and platform specific navigation components. 

Other Organizational Components

There are many such components.  A few useful onse are , , and .  These are organization components that are platform specific.  

Links:
  •  

Comments

Post a Comment

Popular posts from this blog

Go Programming Blueprints, Chapter 2, Adding User Accounts

A universal truth in programming is that there are relatively few unique unsolved problems.  What tasked with a new problem, always see what other solutions exist and how we can solve our new one.  In this instance, we are going to use open source solutions to auth against existing services. Handlers all the way down Everything we write will be http handlers.  This allows us to encapsulate objects as far down the chain as needed.  Making pretty social sign in page We get a quick lesson on bootstrap, and why and how to use it.  There are two methods to showing our bootst rap.  We can leave it hosted on a CDN or add it to our assets folder.  Endpoints with Dynamic Paths Go doesn't support the most robust path selections (/path/options), such as ruby on rails or Django python.  As with everything Go, there are open source packages we can use to help with this functionality.  We will use string.split to break our argument paths in the re...
Read more

Successful Big Game Hunting Chapter 10

Chapter 10: Short Course on Bear Hunting As with all the short course chapters, this is a quick chapter on hunting different types of bears.  Mr. Gilchrist has several tips on the different types of bears, and tips on how to distinguish between them.  In at least one western state, there is a test on how to visually tell the difference between a grizzly bear and a black bear. Of course he as tips on how to prepare a bear hide for for taxidermy, and how to score a bear as a trophy.  He also has several tips on how to tell if a bear is a trophy. Favorite Quote: "Bears often react violently to a superficial hit.  He may fall as though mortally wounded, when only hit in the paw"
Read more