directory

  • Set up mining pit in ios environment
  • Android environment set up mining pit
  • Use of the React-Native base components
  • Integration of ANTD-mobile-RN component libraries
  • React-native uses a library of font ICONS
  • How does React-Native do the startup screen and welcome page
  • [email protected] Use of navigation components

preface

RN comes with some UI components, but according to RN, component libraries behave differently on ios and Android. Views, Text, buttons, and other components behave differently when rendered in native applications. The Button component, for example, renders text on ios and a Button on Android. If you want the rendered UI component style to be consistent, you need to write your own components or use a third-party UI component library. Ant Financial’s ANTD-mobile-RN component library is used here.

Features and Advantages

  • UI style is highly configurable and extensible, easily adapted to various product styles
  • React Native supports multiple platforms such as iOS, Android, and Web, with rich components that cover various scenarios
  • Provide “components on demand”/”Web page hd display “/ “SVG Icon” and other optimization solutions, integrated development
  • Use TypeScript development, provide type definition files, support type and attribute intelligent hints, convenient business development
  • Fully compatible with React

Applicable scenario

  • Suitable for medium and large product applications
  • Suitable for multi-terminal applications based on React – Native
  • Suitable for highly customized applications with different UI styles

The installation

Installation conditions:

  • The current stable version is V4.0.5, so react-Native needs to install 0.57.x or later.

Installation is relatively simple, refer to antD-mobile-Rn’s Github introduction. The installation steps are as follows:

npm install @ant-design/react-native --save
Copy the code

If you are installing version 4.x (the latest version), you need to install the following dependencies

  • @react-native-community/slider
  • @react-native-community/viewpager
  • @react-native-community/masked-view
  • @react-native-community/segmented-control
  • @react-native-community/cameraroll
  • @react-native-community/async-storage
  • @react-native-community/picker

The following command is used:

npm i @react-native-community/slider @react-native-community/viewpager @react-native-community/masked-view @react-native-community/segmented-control @react-native-community/cameraroll @react-native-community/async-storage @react-native-community/ picker-s # CD ios pod installCopy the code

There is a pit here. In fact, this pit is mainly caused by the lack of timely update of antD-mobile-native official website. ** NPM install@ant-design /react-native ** does not mention the installation of the 4. X version of NPM install@ant-design /react-native ** does not mention the installation of the dependencies mentioned above.

Link font ICONS as well as automatic links

This completes the installation. Since the ANTD-Mobile-Rn component library uses the font icon library, you need to associate these fonts with the native system. Try using the following command:

# Manually link font icon NPX React -native linkCopy the code

Load components as needed in the project

Once installed, babel-plugin-import needs to be installed in order to load components on demand

npm i babel-plugin-import -D
Copy the code

Create a.babelrc file in the project root directory with the following contents:

// .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "@ant-design/react-native"}] // The difference with Web platform is that there is no need to set the style]}Copy the code

Once the above configuration is complete, you can use the following method to load components on demand.

import { Button } from '@ant-design/react-native'; . Export default class index extends Component {goMyPage() {const {navigation} = this.props; navigation.navigate('My', { itemId: 86, otherParam: 'anything you want here', }); } render() { return ( <View style={styles.container}> <Text> Home </Text> <Button>default</Button> </View> ) } }Copy the code

The use of antd – mobile – rn

If the above installation process is successfully completed, you are ready to use the component happily. Here is a simple example

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Button from '@ant-design/react-native/lib/button';

class HelloWorldApp extends Component {
  render() {
    return <Button>Start</Button>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
Copy the code

However, if you need to use Modal and Toast, you also need to add a Provider at the entrance of the App.

import React, { Component } from 'react'; import { AppRegistry } from 'react-native'; import { Button, Provider, Toast } from '@ant-design/react-native'; class HelloWorldApp extends Component { render() { return ( <Provider> <Button onPress={() => Toast.info('This is a toast tips')}> Start </Button> </Provider> ); }}Copy the code

As for the other components also need to see the details of the official website demo, here is not redundant, because the official website demo is too detailed.