Records of Pit Points in React-Native Development

From the perspective of mobile development, both iOS and Android have their own UI features, so react-native 's claim that writing a set of codes can be used universally is a lie. In actual development, you will find that many controls are in iOS and Android. The effect displayed on Android is different, or some attributes support iOS but not Android . react-native only supported iOS in the early days, and later supported Android, so until now react-native supports the iOS platform more friendly than the Android platform.

For UI

1. The textinput component will add a line in the input box by default, which is ugly. In actual development, you need to set underlineColorAndroid='transparent'properties and remove the default line under the Android system.
2. Due to the characteristics of the iOS and Android platforms, the same component can achieve the designed UI effect on iOS, but it may not achieve the effect on Android. In this case, you need to use import {component original name as alias} from ' Component source' , introduce third-party components with the same name, and display UI effects for different platforms.
3. react-native supports shadow effects for iOS, but Android does not. In this case, you can only find third-party components to support it, or use the method of cutting pictures to support it.
4. To achieve the frosted glass effect , I searched a lot of information on the Internet, and all recommend the library react-native-blur , but this library also supports iOS very well, but it is not so friendly to Android. The iOS side supports component nesting, and the frosted glass effect can be achieved without setting the ref of the image, and the view under the frosted glass can be dynamically displayed (such as a carousel image); Android does not, and the component nesting method cannot be used , and must set the ref of the picture, in other words, it only supports frosted glass effect on a static picture.
5. For the processing of keyboard occlusion, the events triggered by iOS and Android are different, so separate processing is required for different platforms.
6. When updating the state of the current component, when using setstate() to update, the Toast prompt that should have been displayed will not be displayed. At this time, the state should be refreshed in the callback of the Toast display method.

Differences in method support

In the actual development process, you will find that there are some methods that are effective for iOS, but the running results are different on the Android platform. In this case, either find another one that supports both ends, or use different methods for different platforms. Methods.

1. startWith()Judging the prefix of the string, in the actual development, it is found that the running result on the iOS platform is correct, but the Android operation result is incorrect, print the data, and find that the data is correct. So I found that startWith()the http link judgment for android does not work . indexOf()After using this method containing strings, the running results at both ends are correct.
2. For the deletion of spaces, in actual development, it is necessary to delete the spaces entered when the user enters the account number and password . During the actual operation, I found that under the Android platform, no matter how many spaces you enter in a row, as long as the user stops typing, the use of regular expressions to filter the spaces in the string will take effect and achieve the effect of deleting spaces; the iOS platform can only delete A space, if you enter multiple spaces in a row, a dot will appear in the middle, and the regular expression will not work for extra spaces. This hit iOS in the face .

The pit of the redux framework

The redux framework uses the form of state judgment to process business logic. In the actual development project, it is necessary to ensure that the state of the business logic judgment cannot have the same situation, otherwise some supernatural bugs will appear. When I was developing the login & registration process, because it was a different page, the judgment of the state used was the same (the input verification code when registering and the input verification code when forgetting the password have the same jump logic). Since the AppState state of redux is global, and it is registered to forget this line, the push page is used. When I forgot my password, I pushed twice to enter the password box page. After searching for a long time, I climbed out of this pit by jumping to the printed page.

The reason for this bug is that I don’t understand the global state mechanism of redux, and I haven’t shielded the state judgment method of the page that has been pushed into the stack. As a result, when I forget the password later, the state of the jump password box on the registration page is satisfied. , also jumps.

Summarize

Using react-native for development, you must be prepared to encounter pits at any time, and always be ready to fill the pits. The road to react-native development is very long, and there are still mountains after this mountain.