三星 Z Fold 设备中的 React Native UI 问题

Question

我使用的是 React Native 版本 0.70.0。当我第一次在 Samsung Z Fold 3 移动设备上运行 React Native 应用程序时，它似乎运行良好。然而，一旦我折叠然后展开设备，用户界面就会扭曲。当我将其保留为后台进程时，用户界面也会变得扭曲。如果我展开后从头打开它，UI 将正确显示。

我使用了 Dimension、pixelRatio 和“react-native-size-matters”来使其具有响应能力。

在我看来，我无法理解这个屏幕尺寸。我启动应用程序的视图保持不变，即使它应该发生变化。我应该怎么做才能解决这个问题？

Answer 1

如果您的应用程序针对的是可折叠设备，您应该知道屏幕折叠/展开会触发屏幕尺寸常量的变化（来自 Dimension 或 useDimension() 等）。

因此，您应该通过挂钩“更改”事件来监听更改事件，并在必要时更新大小（在 JSX 或样式表中）。

可以在这里找到一个很好的例子：https://reactnative.dev/docs/dimensions

Answer 2

使用

rn-declarative

使 ui 响应。

rn-declarative

是一个响应式布局引擎，允许将单一表单代码库渲染到多个移动设备外形尺寸

npm i @ui-kitten/components @eva-design/eva react-native-svg rn-declarative rn-declarative-eva

您可以通过阅读本文

找到有关 Galaxy Fold 和 Samsung DeX 的 React-Native 应用程序开发的更多详细信息

您使用

rn-declarative

构建的表单使用

phoneStyle

、

tabletStyle

、

desktopStyle

属性来使 ui 适应不同移动设备的外形尺寸

import { One, FieldType, TypedField } from 'rn-declarative';

import { Text } from '@ui-kitten/components';
import { ScrollView } from 'react-native';

const fields: TypedField[] = [
    {
        type: FieldType.Component,
        style: {
            justifyContent: 'center',
            width: '100%',
            height: 125,
        },
        element: () => (
            <Text category='h4'>
                Adaptive columns
            </Text>
        ),
    },
    {
        type: FieldType.Group,
        style: {
            width: '100%',
        },
        fields: [
            {
                type: FieldType.Group,
                phoneStyle: {
                    width: '100%',
                },
                tabletStyle: {
                    width: '50%',
                },
                desktopStyle: {
                    width: '25%',
                },
                fields: [
                    {
                        type: FieldType.Component,
                        style: {
                            width: '100%',
                        },
                        element: () => (
                            <Text category='h6'>
                                FieldType.Text
                            </Text>
                        ),
                    },
                    {
                        type: FieldType.Text,
                        style: {
                            width: '100%',
                        },
                        name: 'text',
                        title: 'Text',
                        description: 'Single line',
                    },
                    {
                        type: FieldType.Text,
                        style: {
                            width: '100%',
                        },
                        validation: {
                            required: true,
                        },
                        dirty: true,
                        name: 'text_invalid',
                        title: 'Text',
                        description: 'Invalid',
                    },
                    {
                        type: FieldType.Text,
                        style: {
                            width: '100%',
                        },
                        inputMultiline: true,
                        name: 'text',
                        title: 'Text',
                        description: 'Multi line',
                    },
                ],
            },

            ...

];

export const MainPage = () => {
    return (
        <ScrollView>
            <One fields={fields} onChange={console.log} />
        </ScrollView>
    );
};

export default MainPage;

您还可以使用

useMediaContext

钩子通过经典的 JSX 标记以更命令式的方式编写代码

import { useMediaContext } from 'rn-declarative'

...

const { isPhone, isTablet, isDesktop } = useMediaContext();