One, problem record

Here we click “three more” on the left and a secondary hidden menu will pop up. Due to componentization, this secondary menu is held by the bottom menu component.

First on the page layout. For ios, the default is penetrable, but for Android, the default is not penetrable, and we need to configure the uncut attribute in the XML

android:clipChildren="false"
android:clipToPadding="false"
Copy the code

Or in CSS writing, we need to add the Overflow property

overflow: 'visible'.Copy the code

Second, in terms of event passing, the original rendering engine on the mobile side is still used because of cross-platform development rather than pure HTML web development. Here, ios also has good support for passing views, but on Android, the click event doesn’t work. As is shown in

Second, the solution

For Android native writing, we consider The Android event distribution mechanism. Use the onTouchEvent event distribution function on the rewrite page to assign the event to the button event in a location-based manner. The code is as follows

@Override
public boolean onTouchEvent(MotionEvent event) {
    // First define an array to receive the value of the button's coordinate xy
    int[] xy = new int[2];
    
    // Get the top/left XY values of the button
    // Button variable. I've already got the control in onCreat()
    button.getLocationOnScreen(xy);

	// Define an array that evaluates the bottom/right XY values of the control
    int[] xy_end = new int[2];
    xy_end[0] = buttom.getWidth() + xy[0];
    xy_end[1] = buttom.getHeight() + xy[1];
	// Now we have the upper left and lower right coordinates of the button
	// Two points can determine a rectangle

	// The event contains the click information;
	// We determine whether the clicked xy value is in the button coordinates, in fact, determine whether the clicked XY value is in the above rectangle;
    if (event.getX() >= xy[0] && event.getX() <= xy_end[0]
        && event.getY() >= xy[1] && event.getY() <= xy_end[1]) {
        // If so, then execute the code inside, where we can callOnClick() the button

		// Here's the code
		// The button can be activated with a single tap and a long press.
		// However, my button has an animate() event, so continuous clicking will cause me to click the button again before the animation is complete.
		// So I made the decision not to click until the animation was finished, like me
		// In practice, the reader does not use these two lines of code at all
		// Let me see if some readers can copy the code without looking at it -- manual is funny
		// Although you are standing on the shoulders of giants, you need to understand the principle so that you will not fall off.
        if (isMoreShow == false && xy[0] >= button.getHeight())
            return false;

		// We callOnClick the button, that is, simulate clicking the button;
        button.callOnClick();
        return false;
    }

    return super.onTouchEvent(event);
}

Copy the code

I wonder if there’s something simpler. The React-native Gesture-handler library is recommended for React-native. It is essentially the same, but it is easier to use when it is encapsulated. Change before clicking invalid writing as follows

<UIButton style={itemContainer}
                          onPress={() = > {
                              this.setState({ showMore: false}); item.onPress(); }} ><UIText children={item.title} />
                </UIButton>
Copy the code

After using the gesture library

<TapGestureHandler
                                        onHandlerStateChange={event= >this._onSingleTap(event,item)}
                                        numberOfTaps={1} ><View style={itemContainer}>
                                            <UIText children={item.title} />
                                        </View>
                                    </TapGestureHandler>
Copy the code
3. Remaining issues

1. Why does Android not assign events to views that are outside of the sublayout? Is there any benefit or is there some difficulty? 2. In addition, when the page is rotated by 90 degrees on Android and ios, it will be found that the gestures on ios are rotated by 90 degrees (so as to fit the user’s operation mode), but the gestures on Android are still the same (causing the user to swipe horizontally to become vertical operation). What is the reason for this?