AccessibilityRole (iOS, Android)

none No characteristic elements.
button has the characteristics of a button.
link has link characteristics.
search is a text box used as a search box.
image has image features. Can be used in conjunction with buttons or links.
The keyboardkey element is used as a key of the virtual keyboard.
text has the characteristics of unmodifiable text.
The adjustable element has adjustable characteristics (such as a slider).
imagebutton
header serves as the head of the content area (such as the title of the navigation bar).
summary Provides the current summary summary information element when the app is cold-started (refers to completely exiting the background and then entering). For example, when the weather application starts cold, the element that displays the current weather conditions will be marked as summary.
alert
checkbox
combobox
menu
menubar
menuitem
progressbar
radio
radiogroup
scrollbar
spinbutton
switch
tab
tablist
timer
toolbar

Improve user experience

Configure text input

Due to the small screen and soft keyboard of the touch screen mobile phone, it is a challenge to input text in the mobile phone. But you can configure text input based on the data you need to make this process easy.

Auto focus (focus) The first text field uses placeholder as the expected input format to enable or disable automatic capitalization and automatic correction. Select the keyboard type [e.g. email, numeric] Make sure that the Enter button focuses on the next field or submits the form

Layout management when the keyboard is hidden

The soft keyboard takes up almost half of the phone screen. If you have interactive components that will be covered by the soft keyboard, please use [KeyboardAvoidingView component] to ensure that they can be accessed when the keyboard is opened.

Enlarge the touchable area

It is very difficult to accurately click a button on the phone. Make sure that all interactive elements are greater than or equal to 44x44. Common ways to support large sizes are: use padding, minWidth and minHeight styles. Alternatively, you can use the hitSlop attribute to increase the interactive area without affecting the layout

Screen rotation lock

Under normal circumstances, multiple screens (referring to landscape and portrait) will display normally unless you use the Dimensions API and do not handle orientation changes. If you don't want to support multiple screen orientations, you can lock the screen orientation to landscape or portrait.

For Android, open the AndroidManifest.xml file and add 'android: screenOrientation = "portrait"' in the Activity element to lock the screen to portrait, or use 'android: screenOrientation = "landscape"' to lock the screen to landscape.

Timer

setTimeout, clearTimeout setInterval, clearInterval setImmediate, clearImmediate requestAnimationFrame, cancelAnimationFrame requestAnimationFrame (fn) and setTimeout (fn, 0) are different, the former will be executed once after each frame refresh, and the latter will be executed as fast as possible (possible on iPhone5S More than 1000 times per second).

setImmediate will be executed at the end of the current JavaScript execution block, just before sending batch response data to the native. Note that if you execute setImmediate in the callback function of setImmediate, it will be executed immediately, instead of waiting for the native code before the call.

Promise implementation uses setImmediate to perform asynchronous calls.

An important reason why InteractionManager native applications feel so smooth is to avoid heavy operations during interaction and animation. In React Native, we are currently restricted because we only have one JavaScript execution thread. However, you can use InteractionManager to ensure that all interactions and animations have been processed before performing heavy work.

The application can use the following code to schedule a task to be executed after the interaction ends:

InteractionManager.runAfterInteractions(() => {
  // ...需要长时间同步执行的任务...
});