我正在嘗試camera-x整合android fragmentreact-native
這是我的本機代碼
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
......
}
而不是Framelayout，我也嘗試使用LinearlayoutandConstraintLayout但同樣的問題仍然存在
另一方面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，我不明白為什么
完整的源代碼在這里
uj5u.com熱心網友回復：
您的代碼的第一個問題是您在此處使用 200x200 像素對其進行樣式設定：
<CealScanQrViewManager
style={{
// You intentionally scale it to be small
height: PixelRatio.getPixelSizeForLayoutSize(200),
width: PixelRatio.getPixelSizeForLayoutSize(200),
}}
第二件事是您正在使用來自 androidx 相機包的 PreviewView，這不是一個簡單的SurfaceView，TextureView而是一個包裝器。這是什么意思 - 檔案指出
它在內部使用 TextureView 或 SurfaceView 來顯示相機饋送，并對它們應用所需的轉換以正確顯示預覽，這涉及校正它們的縱橫比、縮放和旋轉。
這意味著 if 將只使用正確的視圖，而忽略與預覽容器大小相關的任何變形，就像之前使用 Surface o Texture 視圖一樣。因此，如果預覽大小或縱橫比與您的螢屏（或作為預覽的父組件）不同，它將與父尺寸不匹配，但會被縮放以“正確”地顯示并在預覽大小范圍內。
在普通 Surface 或 Texture 視圖中引導相機預覽不會有此限制，但如果您的容器和預覽的尺寸或縱橫比不匹配，它將被扭曲。
這不是解決方案，但在您的情況下沒有簡單的解決方案 - 您必須考慮上面的資訊來調整您的代碼。
編輯
還有另一種方法，但它很棘手，我不會給你一個實作——只是一個通用的方法。您可以做什么，您可以獲得預覽的縱橫比和大小，并通過負填充或自定義視圖容器將其剪切，其中包含一些相關邏輯。這不是簡單的方法，也不是那么難——它只是很棘手，而且看起來非常多余。
例如，如果您的預覽縱橫比 (h/w) = 1.20 并且您的螢屏縱橫比 (h/w) = 1.40，則如果居中，您的預覽將在頂部和底部有間隙。現在您的目標是使預覽的縱橫比為 1.40，而不會扭曲在其上渲染的影像 - 您必須從左右剪切預覽，以使其頂部和底部沒有間隙。反之亦然，如果您的預覽縱橫比大于螢屏之一
類似的東西。
uj5u.com熱心網友回復：
Pavlo 的回答幫助了我，但如果有人對確切答案感興趣，這就是我所做的
我style prop從本機端洗掉并更改manuallyLayoutChildren方法如下
private fun manuallyLayoutChildren(view: ViewGroup) {
for (i in 0 until view.childCount) {
val child = view.getChildAt(i)
child.measure(
View.MeasureSpec.makeMeasureSpec(view.measuredWidth, View.MeasureSpec.EXACTLY),
View.MeasureSpec.makeMeasureSpec(view.measuredHeight, View.MeasureSpec.EXACTLY))
child.layout(0, 0, child.measuredWidth, child.measuredHeight)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/513347.html