React Native - 指定屏幕尺寸的可扩展样式表

Question

我需要将样式尺寸更改为宽度<520、宽度<768、宽度<960 等 3 种不同尺寸

我尝试将条件样式表制作为

{const width = useWindowDimensions().width;
 //Codes 
 ...}

if( 0 <= width <= 520) {
const styles = StyleSheet.create({
  container: {
    width: '%100',
  },
}
else if ( 521 <= width <= 768) {
const styles = StyleSheet.create({
  container: {
    width: '%70',
  },
}
else {
const styles = StyleSheet.create({
  container: {
    width: '%50',
  },
}

如何进行这样的操作？有没有更好的办法？

Answer 1

我认为在这种情况下使用 StyleSheet 没有任何意义，因为它取决于运行时可用的变量（宽度），而您不会不再使用 StyleSheet 获得任何性能优势。我建议简单地创建一个函数，如：

type getContainerWidth = (windowWidth: number) => number

并将其直接传递给视图样式，例如：

<View style={[styles.sharedContainerStyle, {width: getContainerWidth(windowWidth)}]} />

Answer 2

您可以创建几个样式：

w100: { width: '100%'}
w70: { width: '70%'}
w50: { width: '50%'}

在 'return' 之前的 'render' 中（如果是 class 组件）用 w100/w70/w50 创建 'const actualWidth' 并将其传递给 'style'。

Answer 3

我是这样弄的

    import {useWindowDimensions,...} from 'react-native';
    const [styles, setStyles] = useState(stylesS);

    useEffect(() => {
        if (0 <= width && width < 768) {
            // Small Screen
            setStyles(stylesS);
        } else if (768 <= width && width < 992) {
            //medium
            setStyles(stylesM);
        } else {
            //large
            setStyles(stylesL);
        }
    }, [width]);

const stylesS = StyleSheet.create({
...});


const stylesM = StyleSheet.create({
...});


const stylesL = StyleSheet.create({
...});

React Native - 指定屏幕尺寸的可扩展样式表

React Native - Scalable Stylesheet for Specified Screen Sizes

conditional-statements

screen-size

react-native

react-native-stylesheet