反應原生。如何縮放視圖以修復較小的螢屏

我有一個在 iPhone 13 上顯示的組件，但是在螢屏稍小的 iPhone SE 上，我的一些元素沒有完全顯示。我想知道是否有一種方法可以縮放組件，以便所有內容都顯示在螢屏上。在這個例子中，我有 iPhone SE，它正在切斷我的保存按鈕和預覽視窗。但是在更大的設備上，一切都顯示出來了。我不希望這個視圖能夠滾動。

<>
      <Appbar.Header>
        <Button
          labelStyle={{color: 'white'}}
          icon="arrow-left"
          mode="text"
          onPress={() => goToStep(1)}>
          Scenes List
        </Button>
        <Appbar.Action />
      </Appbar.Header>
      <View
        style={[
          styles.container,
          {
            paddingLeft: insets.left,
            paddingRight: insets.right,
          },
        ]}>
        <View style={styles.topContainer}>
          <TextInput
            label="Title (Optional. Default is used if blank)"
            mode="outlined"
            ref={inputRef}
            value={text}
            onChangeText={inputText => setText(inputText)}
          />
          <Paragraph>
            Select a text color then an icon or background color for your button{' '}
            <Paragraph style={{color: 'red'}}>
              (To reset, press and hold buttons)
            </Paragraph>
          </Paragraph>
          <View style={styles.row}>
            <View style={styles.btnWrapper}>
              <View style={styles.textBtnContainer}>
                <ColorPickerButton
                  containerStyle={styles.styleBtn}
                  useText={'TEXT COLOR'}
                  selectedColor={setSelectedTextColor}
                />
                <ColorPickerButton
                  containerStyle={styles.styleBtn}
                  useText={'BG COLOR'}
                  selectedColor={setSelectedBgColor}
                />
                <UploadIcon path={setImage} />
              </View>

              <Button
                icon="content-save"
                mode="contained"
                onPress={saveSelections}>
                Save
              </Button>
            </View>
            {screen.orientation === 'Landscape' && (
              <View style={styles.previewPortrait}>
                <PadPreview item={padSelections} />
              </View>
            )}
          </View>
        </View>
        {screen.orientation === 'Portrait' && (
          <View style={styles.previewLandscape}>
            <PadPreview item={padSelections} />
          </View>
        )}
      </View>
    </>

uj5u.com熱心網友回復：

沒有通用的解決方案來處理開箱即用的小型設備。大多數時候，你必須自己明確地處理這個問題。一種方法是檢索螢屏尺寸，然后自己更改設計布局和字體大小。

您可以使用以下代碼片段來執行此操作。

import { Dimensions } from "react-native"


const width = Dimensions.get("window").width
const height = Dimensions.get("window").height

第一代 iPhone SE 的邏輯螢屏寬度為 320 像素，邏輯高度為 568 像素。

在您的特定情況下，如果螢屏寬度小于或等于 320 像素，您可能希望實作不同的布局。您還可以嘗試回應地縮放組件的大小。對于保存按鈕，這可能如下所示。

const width = Dimensions.get("window").width

...

 <Button
    style={{width: width > 320 ? "100%" : "70%"}}
    icon="content-save"
    mode="contained"
    onPress={saveSelections}>
     Save
 </Button>

您也可以使用不同的 flex 布局，但最終您需要自己為非常小的設備實作不同的行為。

標籤：反应式

上一篇：對存盤庫使用不安全的協議build.gradle反應原生

下一篇：更新陣列而不更改其順序