Mastering React Native电子书

Mastering React Native

Mastering React Native

Credits

Disclaimer

About the Authors

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Building a Foundation in React

Library versus framework

Motivation for React

Getting started in React

Describing components in JSX

The component

Component composition

Props and PropTypes

Accepting props

PropTypes

Passing props

Default props

Props.children

Event handlers

State

The component lifecycle

The update cycle

Unmounting the component

Alternate component forms

React.createClass

Functional components

Summary

2. Saying HelloWorld in React Native

Understanding the mobile app development ecosystem

Adobe PhoneGap

Ionic

NativeScript

React Native

Extending React Native

Introducing style and layout in React Native

Understanding all the React Native tools

Xcode

Google Chrome

Homebrew (also known as brew)

Node.js and npm

Watchman

Flow

React Native command-line interface (CLI)

Installing our tools

Installing Xcode

Installing Homebrew

Installing Node and npm

Installing Watchman and Flow

Installing the React Native CLI

Creating our first React Native app

React Native Packager

Understanding our HelloWorld app

Importing dependencies using ECMAScript 2015

Our HelloWorld component

HelloWorld style code

Registering the root component

Why import React?

Debugging a React Native app

Enabling the Chrome Debugger

Breakpoints

Summary

3. Styling and Layout in React Native

Constructing and applying styles

Inline styles

Styles as objects in your React Native components

Stylesheet

Using Stylesheet.hairlineWidth

Applying component-specific style properties

Styling without inheritance

Understanding React Native's take on the box model and flexbox

Box model

Understanding Flexbox

Covering the other axis

Flex shrinking and growing

Setting flexBasis

Growing and shrinking flex items

Styling text with React Native

Text style properties

Encapsulating text styles in reusable components

Styling images

Background images

Inspecting and debugging styles

Using the React Native Inspector

Adding media query behavior to React Native

Using Dimensions

Using onLayout per View

Summary

4. Starting our Project with React Native Components

Native components

Text

Props

View

Props

Image

Props

Static methods

Touchable

Props

ListView

DataSource

renderRow

Props

Modal

Props

WebView

Props

TabBarIOS

Props

TabBarIOS.Item

Props

TextInput

Props

Other input components

Native APIs

ActionSheetIOS

Alert

Vibration

StatusBar

Summary

5. Flux and Redux

The Flux architecture

Motivation

Implementing Flux

Creating our view

Actions and action creators

Dispatcher

Stores

Rendering updated data

Getting started with Redux

Principles of Redux

Installing Redux

Implementing Redux

Refactoring the store

Reducer

Creating the store

Multiple reducers

Action creators

Subscribing to the store

React-Redux

Installing React-Redux

React context and providers

Container and presentational components

Middleware

Summary

6. Integrating with the NYT API and Redux

Understanding the NYT API data

Wiring up our Redux data flow

Creating the Redux state tree

Wiring up Redux data to our app

Refactoring and reshaping

Refactoring the components

Reshaping the data

Introducing Reselect

Adding search

Wiring up the NYT API with asynchronous requests

Fixing iOS transport security

Adding pull to refresh and a loading spinner

Summary

7. Navigation and Advanced APIs

Navigation landscape

NavigatorIOS

Navigator

NavigationExperimental

Choosing a navigator

Using Navigator

The Navigator component

Navigation bar

Advanced navigation with NavigationExperimental

Representing the navigation state

Managing the navigation state

The CardStack component

Navigation header

Tabbed navigation

Adding in the modal

Other advanced APIs

Offline messages with NetInfo

Opening the browser with linking

Saving bookmarks locally with AsyncStorage

Summary

8. Animation and Gestures in React Native

Introducing LayoutAnimation and Animated

Building the basic Onboarding experience

Getting started

Adding LayoutAnimation

Adding a bit more animation

Understanding Animated

Refactoring our Onboarding experience

Adding Animated to our Onboarding experience

Interpolating Animated Values

Using PanResponder with the Animated API

Touching up PanResponder

Summary

9. Refactoring for Android

Installing the necessary tools

Installing the Java Development Kit

Installing Android Studio

Configuring Android Studio

Configuring ANDROID_HOME and your PATH

Verifying that the CPU/ABIs are installed

Starting the Android emulator

Adding Android support to RNNYT

Branching platform logic

Refactoring RNNYT for Android

Fixing Android vibration

Using DrawerLayoutAndroid

Customizing Android styling

Enabling LayoutAnimation

Summary

10. Using and Writing Native Modules

Using native modules

Installing native modules

Using the library

Profile page

Adding the profile to the iOS home screen

Adding the profile to the Android home screen

Writing native modules

Native modules in iOS

Setting up the module

Exporting methods

Communicating with callbacks

Communicating with promises

Communicating with events

Exporting constants

Native modules in Android

Setting up the module

Exporting methods

Communicating with callbacks

Communicating with promises

Communicating with events

Exporting constants

Summary

11. Preparing for Production

Testing

Unit testing

Component testing

Performance

Problematic ListView

Using Perf Monitor

Analyzing a Systrace

The React Perf Library

shouldComponentUpdate and PureRenderMixin

Minimizing the impact of state changes

The ListView data source

Additional optimizations

Unresponsive touch and slow navigation

Mitigating unresponsive touch

Smoothing out animations with InteractionManager

Performance summary

Running on physical devices

Debugging on an iOS device

Testing your app on an iOS device using Release

Debugging on Android devices

Generating a signed APK

Deploying our application

Remove debugging code

iOS

Creating provisioning profiles

Registering an application in iTunes Connect

Adding icons and updating the launch screen

Creating an archive

Beta testing and release

Android

Signing the application

Testing the release build

Generating the APK

Beta-test and release

Summary

12. React Native Tools and Resources

Evaluating React Native Editors, Plugins, and IDEs

Atom and Nuclide

Taking React Native beyond iOS and Android

Introducing React Native Web

Configuring React Native Web

React Native plugin for Universal Windows Platform

Configuring the React Native plugin for UWP

React Native macOS

Configuring React Native macOS

Summary

References