Question

在使用GLSurfaceView和Android上的本机响应时，我遇到了一个非常奇怪的问题。

我创建了一个自定义OpenGL渲染器，希望将其用作更大的react native视图中的组件。问题是当我将JS端上的组件的大小调整为所需大小时，屏幕的其余部分会变黑。

这是创建该视图的React Native代码：

Func<MyDataType, DateTime> selectKey;

switch (PublicVariables.customfiltersetting)
{
    case 0:
        goto default;
    case 1:
        selectKey = s => new DateTime(s.Date.Year, s.Date.Month, s.Date.Day, s.Date.Hour, s.Date.Minute, 0);
        break;
    case 2:
        selectKey = s => new DateTime(s.Date.Year, s.Date.Month, s.Date.Day, s.Date.Hour, 0, 0);
        break;
    case 3:
        selectKey = s => new DateTime(s.Date.Year, s.Date.Month, s.Date.Day, 0, 0, 0);
        break;
    case 4:
        selectKey = s => new DateTime(s.Date.Year, s.Date.Month, 1, 0, 0, 0);
        break;
    case 5:
        selectKey = s => new DateTime(s.Date.Year, 1, 1, 0, 0, 0);
        break;
    default:
        selectKey = s => new DateTime(s.Date.Year, s.Date.Month, s.Date.Day, s.Date.Hour, s.Date.Minute, s.Date.Second);
        break;
}

var ordering = from s in Filter.FullData()
               group s by selectKey(s) into g
               let count = g.Count()
               orderby g.Key descending
               select new { Date = g.Key, Column = g.Average(s => s.Column), Count = count };

ImageBlendView是我按照RN网站here上的说明制作的一个本机UI组件，这就是在其中创建带有紫色矩形的红色的原因。这只是一个非常基本的Opengl渲染器，它使用从JS传入的颜色和红色透明色绘制一个矩形。我在其上方添加了一个文本字段，并将组件的大小调整为50高度。

我不知道为什么ImageBlendView组件被黑色包围。

清除颜色是红色，所以我知道它不是我的渲染器清除不应该的像素。但是，它似乎确实与我的渲染器类有关，因为当我在GLSurfaceView类中注释掉将其设置为渲染器的行时，正常的白色背景又回来了，并且组件上方的文本可见。

    public render() {
       return (
            <View style={{ backgroundColor: '#ffffff' }}>
                <Text>Hello World!</Text>
                <ImageBlendView style={{ height: 50 }} boxColour="#f442df" />
            </View>
        );
    }

自定义UI组件的结构与本教程中的结构相同，但我将对其进行详细介绍。

ImageBlendView已添加到包中，并捆绑在视图管理器列表中：

// setRenderer(new OpenGLRenderer(_context, colour));

ImageBlendView.java然后扩展SimpleViewManager，后者创建一个OpenGLView实例，该实例扩展了GLSurfaceView

public class OTSNativePackage implements ReactPackage {

    @Nonnull
    @Override
    public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
        List<NativeModule> nativeModules = new ArrayList<>();
        return nativeModules;
    }

    @Nonnull
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(new ImageBlendView());
    }
}

OpenGLView.java

public class ImageBlendView extends SimpleViewManager<OpenGLView> {

    public static final String REACT_CLASS = "ImageBlendView";
    private static OpenGLView _openGLView;

    @Nonnull
    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Nonnull
    @Override
    protected OpenGLView createViewInstance(@Nonnull ThemedReactContext reactContext) {
        _openGLView = new OpenGLView(reactContext);
        return _openGLView;
    }


    @ReactProp(name = "boxColour")
    public void setBoxColour(OpenGLView view, String color) {
        _openGLView.init(color);
    }
}

请注意，在上面的类中，我可以在其中禁用setRenderer行，并且黑色消失。

我的Renderer在OpenGLRenderer.java中

public class OpenGLView extends GLSurfaceView {
    private Context _context;
    public OpenGLView(Context context) {
        super(context);
        _context = context;
    }

    public OpenGLView(Context context, AttributeSet attrs) {
        super(context, attrs);
        _context = context;
    }

    public void init(String colour){
        setEGLContextClientVersion(2);
        setPreserveEGLContextOnPause(true);

        // If I disable the following line the black goes away
        setRenderer(new OpenGLRenderer(_context, colour)); 
    }
}

我最近尝试过的方法是调用GLES20.glScissor（0,0，width，height）;在onSurfaceChanged方法中。我希望通过剪裁该组件的大小和高度不会影响其余像素，但是我很清楚，这不是OpenGL的问题，而是安装问题。

Answer 1

最后想出了一个解决方案。我只是将JS代码更改为此：

    public render() {
        console.log('***', ImageBlend);
        return (
            <View style={{ backgroundColor: '#ffffff' }}>
                <Text>Hello Nick!</Text>
                <View style={{ height: 50, overflow: 'hidden' }}>
                    <ImageBlendView
                        style={{ height: 50 }}
                        boxColour="#f442df"
                    />
                </View>
            </View>
        );
    }

React-Native Android：调整本机UI组件的大小会导致停电

1 个答案: