Custom View setting height is less than 40pt. Drawing upper line or rectangle will cause the upper side not to display

[lozn00]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
OS: Windows 7
Node: 10.5.0
Yarn: 1.7.0
npm: 6.1.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.2 => 0.55.2

Description

Custom View setting height is less than 40pt. Drawing upper line or rectangle will cause the upper side not to display

Why did the upper part lose the cover? I tried to set the background and adjust the size of the border. that some areas were covered in the upper part, but the background was not affected.

Drawing horizontal lines from X, Y0 coordinates also results in no display. The initial judgment is covered by the parent container, but when the height is adjusted to 50pt, it is displayed normally.

normal pic
because height >40

less than 40

Reproducible Demo

java code

package cn.ijimi.nativeview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;

import com.smileback.bankcommunicationsstyle.PayPasswordInputView;


/**
 * Created by qssq on 2018/7/17 qssq666@foxmail.com
 */
public class DebugEditText extends PayPasswordInputView {
    private static final String TAG = "DebugEditText";

    public DebugEditText(Context context) {
        super(context);
    }

    public DebugEditText(Context context, AttributeSet attributeSet, int i) {
        super(context, attributeSet, i);
    }

    @Override
    public boolean onTouchEvent(MotionEvent motionEvent) {
        Log.w(TAG,"X:"+motionEvent.getX()+",Y:"+motionEvent.getY());
        return super.onTouchEvent(motionEvent);
    }

    public DebugEditText(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 Paint paint=new Paint();
        paint.setStrokeWidth(30);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GREEN);
        canvas.drawRect(0,0,getMeasuredWidth(),getMeasuredHeight(),paint);*/

/*  Paint paint=new Paint();
        paint.setStrokeWidth(30);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.GREEN);
        canvas.drawLine(0,0,getMeasuredWidth(),0,paint);

        setBackgroundColor(Color.RED);*/
    }

    @Override
    public void setBorderWidth(int i) {
        super.setBorderWidth(i);
        Log.w(TAG,"setBorderWidth"+i);
    }

    @Override
    public void setBorderColor(int i) {
        super.setBorderColor(i);
        Log.w(TAG,"setBorderColor"+i);
    }
}

reat-native code

  <TestNKView
                  borderWidth={1}
                    borderColor={"#0000ff"}
   
                    style={styles.payEdittext} isEncryption={false}
             }/>

style

    payEdittext: {
        height: 30,
        backgroundColor: '#abcdef',
        borderWidth: 1,
        borderColor: "#ff0000",
        width: screenwidth * 0.9,
        marginBottom: 10,

        // height: 50,
    },

[lozn00]

TEXTSIZE problem