反应原生视图镜头表面 gl-react-native

Question

我正在尝试对动态添加的表面和文本的视图进行快照，但在导出图像时看不到文本。

<Viewshot>
    <Surface style={{ width:Dimensions.get('screen').width, height:Dimensions.get('screen').height, zIndex: 0 }} ref={(el) => this.surface = el}>
        <Hudson><GLImage source={{ uri: this.state.preview.uri }} resizeMode={'cover'}></Hudson>
    </Surface>
        <Draggable style={{}} x={0} z={0} minX={0} maxX={Dimensions.get('window').width} y={Dimensions.get('window').height / 3}>
            <PinchGestureHandler {...gesture}>
                <Animated.View style={[{ width: Dimensions.get('window').width, height: 'auto', backgroundColor: 'rgba(0, 0, 0, 0.1)', paddingHorizontal: 20, textAlign: 'center', paddingVertical: 10, saving: false }, { transform: [{ scale }] }]}>
                    <Text style={{ color: '#FFF', fontFamily: 'Nunito-Bold', fontSize: 16 }}>{text}</Text>
                </Animated.View>
            </PinchGestureHandler>
        </Draggable>
</ViewShot>

Answer 1

使用更多信息更容易回答这些类型的问题，例如：

• react-native-view-shot 版本
• 您正在开发的平台

我假设您正在为 android 开发。

react-native-view-shot 从 3.0.2 开始不支持 android 上的 gl-react。您可以查看源主页上的互操作性表：https://github.com/gre/react-native-view-shot

但是，您可能想尝试使用react-native-webgl-view-shot。它可能会做你需要它做的事情。或者，您可以修改任一包的源以正确截取 GLImage。我不确定这是否能解决您的问题，但前几天我在寻找类似问题的解决方案时发现了这一点：android-opengl-screenshot

// source taken from: https://stackoverflow.com/questions/4731589/android-opengl-screenshot
public static Bitmap SavePixels(int x, int y, int w, int h, GL10 gl)
{  
     int b[]=new int[w*(y+h)];
     int bt[]=new int[w*h];
     IntBuffer ib=IntBuffer.wrap(b);
     ib.position(0);
     gl.glReadPixels(x, 0, w, y+h, GL10.GL_RGBA, GL10.GL_UNSIGNED_BYTE, ib);

     for(int i=0, k=0; i<h; i++, k++)
     {//remember, that OpenGL bitmap is incompatible with Android bitmap
      //and so, some correction need.        
          for(int j=0; j<w; j++)
          {
               int pix=b[i*w+j];
               int pb=(pix>>16)&0xff;
               int pr=(pix<<16)&0x00ff0000;
               int pix1=(pix&0xff00ff00) | pr | pb;
               bt[(h-k-1)*w+j]=pix1;
          }
     }


     Bitmap sb=Bitmap.createBitmap(bt, w, h, Bitmap.Config.ARGB_8888);
     return sb;
}