Public account: wechat search front end tool person; Take more dry goods

A, advice,

APP development performance Flutter > React Native > Weex

A little awkward about the Flutter > React Native > Weex

Suggestions: Flutter the future trend, hurry to learn, hurry to do; Big companies basically use it;

Method: you can pay attention to ali related technical public number, you can know the current hot technology and dry goods; Personally, I feel that the cutting-edge technology is basically in Ali; It’s safe to learn from the big companies

Links: Flutter learning postures can be accessed by clicking on previous articles one week from entry to practical development experience sharing and summary

Follow-up: This post should not be updated; Now I’ve moved on to Flutter. See my previous article on Flutter

React Native

1. Android and ios terminals can maintain the consistency of UI pages, improve development efficiency, and save development time and resources;

2. Writing UI is fast, similar to writing HTML, flex layout is fun to write, and cross-platform;

3, easy debugging, command + R directly refresh Simulator, without waiting for compilation like Xcode;

4. Better experience than Hybrid App and close to Native App;

5, development and compilation hot update cool crooked, ecological mature strong

React Native Disadvantages:

1. Many are not supported. There is no corresponding RN scheme for payment and sharing, so iOS and Android need to be called respectively.

2. There are still differences between iOS and Android components, which need to be explored slowly;

3. The debug mode in Android is jammed

4, performance can not keep up; For frequent animation, long list, complex interaction and other services; Need special processing, otherwise the page will be stuck for a long time;

5, native debugging some problems, bugs, and node performance does not have a good tool is intuitive recurrence

4. Common problems

1.<TextInput> iOSIn normal,AndroidThere will be a underline, need to add a sentence

underlineColorAndroid="transparent"
Copy the code

2, need to set the height,iOSIs not set to self-adaptive display,AndroidIs not set to display incomplete

3. Make text appear on only one line, beyond display…

TouchableOpacity numberOfLines={1}
Copy the code

4,lineHeight 在 AndroidCannot be set to a decimal. Think of a code that fitsiOS 和 AndroidIf so, you could write:

flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
Copy the code

5. How to make the button not show the style when pressed

If the TouchableOpacity property activeOpacity is set to 1, no transparency is set during activationCopy the code

6,zIndex 在 AndroidIn invalid, post rendered component above.

7, nojsIn theshow/hideMethod, which needs to determine whether to render based on attributes such as:

{this.state.username && this.state.password ? <View style={styles.login}> <Text style={styles.loginText}> login </Text> </View> ( <TouchableOpacity style={styles.login} onPress={this._onPressLoginButton.bind(this)}> <View> <Text Style ={styles.loginText}> Login </Text> </View> </TouchableOpacity>)}Copy the code

Eight,<ListView>The data is obtained through the networkListViewI can’t render directly because the data doesn’t come back when I render,RNWill be reported red for null data

{this.state.data ! = null ? ( <ListView style={styles.listView} dataSource={this.data} renderRow={this.renderRow.bind(this)}/> ) : ( null )}Copy the code

9,RN, OCInteraction,callbackYou can’t have more than one, or RN will crash

10,RNDetermine the platform on which the device is running

Const Platform = require('Platform'); render() { let platform = 'iOS'; if(Platform.OS === 'android'){ platform = 'android' } return ({platform}); }Copy the code

11,RN. Get the width and height of the screen

// 使用Dimensions
const Dimensions = require('Dimensions');
const {width,height} = Dimensions.get('window');
  
// 使用:
leftViewStyle:{
   width: width / 4,
},
Copy the code

12,RNKeyboard recycling

Const dismissKeyboard = require('dismissKeyboard'); dismissKeyboard();Copy the code

13. Set different effects according to different platforms

// Introduce Platform first: import { AppRegistry, StyleSheet, Text, View, ListView, Image, TouchableOpacity, Platform } from 'react-native'; // Use: iconStyle:{width: platform. OS === 'ios'? 30 : 25, height: Platform.OS === 'ios' ? 30:25},Copy the code

14,AndroidGet rid ofTextInputThe bottom line.

// TextInput uses attribute underlineColorAndroid = {'transparent'}Copy the code

15,macShow hidden files

Finder AppleShowAllFiles - Boolean true; killall FinderCopy the code

16,React-NativedisableNavigatorGestures to return

 configureScene(route, routeStack) {   
  // return Navigator.SceneConfigs.PushFromRight;
  var conf = Navigator.SceneConfigs.HorizontalSwipeJump;
  conf.gestures = null;
  return conf;
 }
Copy the code

17,React-NativeMake a call in

import {Linking} from 'react-native'; Function callPhone(){return Linking. OpenURL ('tel:10086')}Copy the code

18,AndroidNext,ImageControl not supportedgifThe solution of

/ / in the android/app/build. Gradle dependencies in the field to add the following content the compile 'com. Facebook. Fresco ": animated - GIF: 0.13.0'Copy the code

19,iosThe following image cannot load properly due toiosSystem restrictions cannot be used directlyhttpThere are two request solutions for

1. Modify the configuration file to support HTTP

2. Change the server mode to HTTPS

20. Call setState with caution

SetState cannot be called randomly. If you call setState, you will call forceUpdate.

2, The system still calls render even if you haven’t changed the fields in state

The end:

  1. Article source: your blog at https://www.cnblogs.com/ljx20180807/p/9908342.html

  2. Some references to other articles, links forget, hope forgive;