小编lan*_*rby的帖子

如何在样式表创建中使用 useTheme 钩子?

我想在组件内的样式表创建函数中使用来自我的本机纸张主题的颜色。这是我的代码

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。这可能吗?

themes react-native react-native-paper

5
推荐指数
1
解决办法
505
查看次数

如何设置宽度和高度,并在视图内向 Expo BarCodeScanner 添加边框

我想在屏幕视图中放置一个 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)

在此输入图像描述

react-native expo

1
推荐指数
1
解决办法
2608
查看次数

标签 统计

react-native ×2

expo ×1

react-native-paper ×1

themes ×1