feat: 添加食物分析结果页面的图片预览功能,优化记录栏显示逻辑

This commit is contained in:
richarjiang
2025-09-04 15:12:39 +08:00
parent 5e00cb7788
commit 05a643a9e6
6 changed files with 495 additions and 99 deletions

View File

@@ -159,21 +159,23 @@ export default function FoodCameraScreen() {
<View style={styles.cameraFrameContainer}>
<Text style={styles.hintText}></Text>
{/* 相机取景框 */}
<View style={styles.cameraFrame}>
<CameraView
ref={cameraRef}
style={styles.cameraView}
facing={facing}
>
{/* 取景框装饰 */}
<View style={styles.viewfinderOverlay}>
<View style={[styles.corner, styles.topLeft]} />
<View style={[styles.corner, styles.topRight]} />
<View style={[styles.corner, styles.bottomLeft]} />
<View style={[styles.corner, styles.bottomRight]} />
</View>
</CameraView>
{/* 相机取景框包装器 */}
<View style={styles.cameraWrapper}>
{/* 相机取景框 */}
<View style={styles.cameraFrame}>
<CameraView
ref={cameraRef}
style={styles.cameraView}
facing={facing}
/>
</View>
{/* 取景框装饰 - 放在外层避免被截断 */}
<View style={styles.viewfinderOverlay}>
<View style={[styles.corner, styles.topLeft]} />
<View style={[styles.corner, styles.topRight]} />
<View style={[styles.corner, styles.bottomLeft]} />
<View style={[styles.corner, styles.bottomRight]} />
</View>
</View>
</View>
@@ -294,21 +296,29 @@ const styles = StyleSheet.create({
alignItems: 'center',
paddingHorizontal: 20,
},
cameraWrapper: {
width: 300,
height: 300,
position: 'relative',
},
cameraFrame: {
width: 300,
height: 300,
borderRadius: 20,
overflow: 'hidden',
borderWidth: 3,
borderColor: '#FFF',
backgroundColor: '#000',
},
cameraView: {
flex: 1,
},
viewfinderOverlay: {
flex: 1,
position: 'relative',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1,
pointerEvents: 'none',
},
camera: {
flex: 1,