我想在组件内的样式表创建函数中使用来自我的本机纸张主题的颜色。这是我的代码
import { StyleSheet, Text, View } from 'react-native';
import { useTheme } from 'react-native-paper';
const Home = () => {
const { colors } = useTheme();
return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<Text>Home Page</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default Home;
Run Code Online (Sandbox Code Playgroud)
我想在样式表中使用 backgroundColor: "#fff" 来引用来自 useTheme 钩子的 color.background。这可能吗?
我想在屏幕视图中放置一个 Expo BarCodeScanner。
我一直使用 vw 和 vh 来表示宽度和高度,因为我希望它根据我拥有的屏幕空间量进行更改。我尝试在它周围设置边框,但它从未显示出来。我尝试将其放在条形码扫描仪周围的视图以及扫描仪本身上。
这是我的条形码扫描仪的代码片段以及相应的样式和屏幕截图。
scannerContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: vw(100),
maxHeight: vh(50),
backgroundColor: 'red',
borderColor: colors.primary,
borderWidth: 5
}
<View style={styles.scannerContainer}>
<BarCodeScanner
onBarCodeScanned={(hasScan) ? undefined : handleScan}
barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}
style={[StyleSheet.absoluteFillObject]}
/>
</View>
Run Code Online (Sandbox Code Playgroud)