RN Compatibility collection

RN compatibility

1. Android – The child element is outside the parent element content area and the click event cannot respond.

In Android, sometimes you have a situation where you give the parent a certain width and height, you give the child an absolute position, and you position the child outside of the parent element, and you find that when you add a click event to the child element, the click event is invalid. This is because in Android, face elements cannot respond to events outside of the parent element’s content area

Example:

Solution: juejin.cn/post/699025…

2. Display :’none’ | ‘flex’ does not work in earlier versions of ios.

Scenes: Sometimes we want to render certain elements in advance, but we don’t want to show them in the interface too early, only to show them when certain conditions are met. That is to say, show and hide functionality.

Our first thought is to use the display: ‘none’ | ‘flex’ properties. This property does do this, but there are compatibility issues in earlier versions of ios, and no matter how we toggle the display value, it is never visible. We can hide it by setting the width and height, but notice that if we set the padding, even if we set the width and height to 0, it still shows a part of it, so we have to set the width and height to 0.

const hidden: ViewStyle = {
  flex: 0,
  height: 0,
  width: 0,
  paddingTop: 0,
  paddingBottom: 0,
  paddingLeft: 0,
  paddingRight: 0,
  overflow: 'hidden',
};
Copy the code

3. In earlier versions of ios, when we switch styles this way, for example: Boolean? Style1 :style2, which may cause the style not to take effect

const style1={ height:100, width:100, } const style2={ height:200, width:200, backgroundColor:"red" } <View style={toggle ? Style1 :style2}></View> // When we change the value of toggle back and forth, we can see that the background color does not change. // But if we write it like this, the background color will change with the value of the toggle:  const style1={ height:100, width:100, backgroundColor:"blue" } const style2={ height:200, width:200, backgroundColor:"red" } <View style={toggle ? Style1 :style2}></View> // guess the cause: style1:style2}></View> // guess the cause: style1:style2}></View> style1}; / / toggle to false style = {... style1,... style2}; / / toggle to false style = {... style1,... style2,... style1};Copy the code

4. When two Modal pop-ups of RN pop up in ios at the same time, the page rendering will be blocked and directly blocked

You are advised to use the react-native-root-modal third-party component library

Solution: www.jianshu.com/p/5a154ca53…

5.RN’s Modal popover in some Android (such as Mi 10) cannot cover the bangs screen, and some mobile phones have bangs both above and below. If a mask is set for the popover, the bangs part will not be masked (in view of many problems of RN’s modal component, it is suggested to use mature online Modal library).

Solution: You are advised to use the react-native- root-Modal library

On Oppo phones or some low-end models, the onTextChange method is slow to respond and does not fire every time you type, but only for the first and last time, similar to shaking

7. The TextInput component sets the text to the right of the oppo phone. If the focus is placeholder, the cursor will stop at the left of the placeholder

Example:

Solution: focus, will be placeholder empty, out of focus, restore placeholder.

8. On Xiaomi phones, numbers can be inexplicably missing

This is because the Lanting Pro font of xiaomi system has a problem in RN display.

Example:

  • As shown above, the slash should be followed by 20, but it isn’t. This kind of missing text is random, maybe next time I look, 19 can’t show, 20 can show
  • This is currently only true for numeric types

Solution:

// Set the font for all numbers to "{fontFamily:"}Copy the code

9. In ios, set the inputText component to autoFocus, so that the page is automatically focused, but after losing focus, the page will not come down. Solution: Do not use autoFocus, manual focus

UseEffect (() => {// focus setTimeout(() => {inputel.current && inputel.current? .focus(); }, 100); } []);Copy the code