preface

The cost of developing and maintaining the same product on different platforms has always been a headache, so various cross-platform development solutions have been born. From the Web container solution, to the pan-Web container solution represented by React Native and Weex, and finally to the self-drawing engine solution represented by Flutter, these excellent cross-platform development frameworks have gradually smoothed the differences of various platforms, making the boundaries of operating systems increasingly blurred.

In recent years, with Google’s promotion of Flutter, old cross-platform technologies such as React Native and Weex began to decline. However, many companies still use React Native, and FaceBook has not given up the update of React Native. FaceBook recently updated React Native version 0.62 with a Flipper debugger and new Dark mode support.

React Native is based on the popular open source JavaScript library React. Js to develop iOS and Android Native apps, there are already many applications using it for cross-platform mobile application development. React Native uses React in JavaScript to abstract the UI components of the operating system instead of DOM elements for rendering, such as

instead of

and
instead of
.

In terms of implementation principle, React Native runs a JavaScript engine in another background thread besides the main thread. The two threads communicate with each other through a batch of quantized Async message protocols. React Native provides a cross-platform Flexbox-like layout system with support for a subset of CSS. You can develop in JSX or plain JavaScript, as well as CoffeeScript and TypeScript.

0.62 Update

Flipper

React Native 0.62 is out, and one of the highlights of this release is Flipper support by default, as shown below.

  • Metro Actions: Reload the application and trigger the development menu directly from the toolbar.
  • Crash Reporter: Check out Crash reports from Android and iOS devices.
  • React DevTools: Use the latest version of React DevTools with all other tools.
  • Network Inspector: Looks at all Network requests made by device applications.
  • Metro and Device Logs: View, search, and filter all Logs from Metro and devices.
  • Native Layout Inspector: View and edit Native layouts output by the React Native renderer.
  • Database and Preference Inspectors: Viewing and editing the device Database and preferences.

To find out more about Flipper, Flipper Documentation.

Diablo mode

The new version adds a new module to support dark mode, the Appearance module, which allows developers to set the theme of an app to be dark or light.

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}
Copy the code

React Native has also added a hook to track status updates for user preferences.

import {Text, useColorScheme} from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};
Copy the code

Apple TV development support

In addition to the above two points, React Native strips the core libraries that support AppleTv development, The related development library was moved to the react-native community/react-native TVOs, and the NPM package React-native TVOs was used for development and maintenance.

Version upgrade support

Everyone knows that upgrading React Native is a very sour experience. If you haven’t stepped on the pit, you won’t know the pain. Facebook has created a Github repository called upgrade-Support where developers can report problems with the Upgrade.

React Native 0.62 also fixes some bugs and reduces the core code of React Native to reduce the size of the app.

Lastly, I have attached my React Native Mobile Development Book, which is based on 0.60.x. Welcome to make fun of it!

In addition, “Flutter Cross-platform Development Practice” has been submitted to publishers and will be published soon. Please pay attention.

React Native 0.62 Update log