我正在尝试将camera-x
集成到react-native
中的android fragment
中
这是我的本地代码
class CealScanQrView(context: Context): FrameLayout(context) {
init {
val frameLayoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
layoutParams = frameLayoutParams
setLayoutParams(layoutParams)
setBackgroundColor(Color.parseColor("#5FD3F3"))
preview = PreviewView(context)
preview.id = View.generateViewId()
preview.layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
addView(preview)
}
//other non related code
......
}
我尝试使用Linearlayout
和ConstraintLayout
而不是Framelayout
,但同样的问题仍然存在
在react-native
端,我将按如下方式使用它
const App = () => {
//non-related code here
.....
return (
<SafeAreaView>
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
{isCameraPermissionGranted ? (
<CealScanQrViewManager
style={{
// converts dpi to px, provide desired height
height: PixelRatio.getPixelSizeForLayoutSize(200),
// converts dpi to px, provide desired width
width: PixelRatio.getPixelSizeForLayoutSize(200),
}}
ref={ref}
onChange={readQr}
/>
) : (
<View style={{backgroundColor: 'red'}} />
)}
<Text style={{color: 'red', fontSize: 25}}>{firstText}</Text>
<Text style={{color: 'red', fontSize: 25}}>{secondText}</Text>
</SafeAreaView>
);
}
这是我的UI外观
你可以看到相机和第一个红色文本之间有一个空间,这个空间是Framelayout
,但是相机没有占据Framelayout
的整个空间,我不明白为什么
完整的源代码here
2条答案
按热度按时间hujrc8aj1#
您的代码的第一个问题是,您在此处使用200 x200像素对其进行样式设置:
第二件事是你使用的是androidx相机包中的PreviewView,它不是一个简单的
SurfaceView
或TextureView
,而是一个 Package 器。它是什么意思-文档中说它在内部使用TextureView或SurfaceView来显示摄像机馈送,并对它们应用所需的变换以正确显示预览,这涉及到校正它们的纵横比、缩放和旋转。
这意味着,如果将只使用正确的视图,而不考虑与预览容器大小相关的任何扭曲,因为它以前是与表面纹理视图。因此,如果预览大小或纵横比不同于您的屏幕(或您的预览的父组件),它将不匹配父尺寸,但将被缩放到看起来“正确”和预览大小范围内。
在普通的“曲面”或“纹理”视图内通道化摄影机预览将没有此限制,但如果容器与预览的尺寸或纵横比不匹配,则会发生扭曲。
这不是解决方案,但在您的情况下没有简单的解决方案-您必须考虑上面的信息来调整您的代码。
编辑
还有一个方法,但它很复杂,我不会给予你一个实现-只是一个通用的方法。你可以做的是,你可以得到你的预览的长宽比和大小,并通过负填充或自定义视图容器剪切它,其中有一些相关的逻辑。这不是一个简单的方法,也不是很难-它只是很复杂,似乎非常多余。
例如,如果您的预览长宽比(h/w)= 1.20和屏幕宽高比(高/宽)= 1.40,你的预览会在顶部和底部有间隙,如果居中的话。现在你的目标是使预览的纵横比为1.40,而不扭曲渲染在上面的图像-你将不得不从左和右剪切预览,这样它就不会在顶部和底部有间隙。2反之亦然,如果你的预览长宽比比大于屏幕的长宽比
差不多吧。
a11xaf1n2#
帕夫洛的回答帮了我的忙,但如果有人对确切的答案感兴趣,我会告诉你
我从本机端删除了
style prop
并更改了manuallyLayoutChildren
方法,如下所示