javascript - 生产环境的奇怪边界是在本机反应中构建的,但不是在开发模式下
问题描述
在我的应用程序中,我有一个通常看起来像这样的屏幕
但是当我为生产而构建时,标题包装器被向下推了几个像素,这导致了一些奇怪的格式:
我真的不明白为什么应用程序在构建发布时与我开发时看起来不同。我还在多个设备上进行了测试,但我在所有设备上都有相同的错误。
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import BottomBar from './component/BottomBar';
export default function ScanScreen({ navigation }) {
const [hasPermission, setHasPermission] = useState(null);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
navigation.navigate("Shelf", { shelfID: data.toString() })
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<View style={styles.titleWrapper}>
<Text style={styles.text}> Shelf Scanner </Text>
</View>
<View style={{flex: 1}}>
<BarCodeScanner
onBarCodeScanned={handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
/>
</View>
</View>
<BottomBar navigation={navigation} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
flexDirection: 'row',
},
titleWrapper: {
width: '100%',
top: 30,
height: 50,
alignSelf: 'center',
alignItems: 'center',
backgroundColor: '#A2F5AA',
},
text: {
fontSize: 15,
justifyContent: 'center',
fontWeight: 'bold',
flex: 1,
marginTop: 10,
},
contentContainer: {
flex: 1
},
});
解决方案
我通过top: 30,
从 titleWrapper 中删除来修复它。标题现在在开发模式下偏移了,但至少在生产版本中看起来是正确的
推荐阅读
- firebird - 如何使用 FBExport 从 Firebird 数据库中导出一些数据?
- node.js - 允许 Nginx 从站点的联系表单发送电子邮件
- azure - Sharepoint 2013 REST API 调用图形 API,同时将内容迁移到 Sharepoint Online 和 Azure 上托管的 UI?
- powershell - Powershell 命令 certUtil ssh 和 exitCode
- javascript - 我无法在我的 express.js 文件中导入 firebase 版本 9
- amazon-web-services - 从 Github Actions 将文件上传到私有网络中的 Amazon EC2
- azure - Azure Functions .Net 5 是否可以将 CosmosInput 绑定到 HttpRequestData 中的参数?
- hook-woocommerce - 本地取件配送方式的自定义字段
- javascript - 网页二维码扫描仪使用 nimiq qr-scanner github
- mysql - 如何在 phpMyAdmin 中使用 VARBINARY 列上的 LIKE 子句运行 MySQL 查询?