react-native 当更改字体缩放比例时，不支持热重载,

pzfprimi 于 5个月前发布在 React

关注(0)|答案(1)|浏览(70)

描述

在旧架构中，我们可以使用command option +/-实时更改字体缩放。在新架构中，需要手动按R键刷新以应用新的字体缩放。

重现步骤

gh repo clone yzhe554/new-arch-font-scale
cd new-arch-font-scale
npm i
npm run ios
使用option command +/-更改字体缩放

React Native版本

0.74.3

受影响的平台

运行时 - iOS

领域

Fabric - 新渲染器

`npx react-native info`的输出

System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M1 Max
  Memory: 107.00 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.18.0
    path: ~/.nvm/versions/node/v18.18.0/bin/node
  Yarn:
    version: 1.22.18
    path: /usr/local/bin/yarn
  npm:
    version: 9.8.1
    path: ~/.nvm/versions/node/v18.18.0/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11567975
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.9
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/yuzheng/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true

堆栈跟踪或日志

N/A

重现者

https://github.com/yzhe554/new-arch-font-scale

截图和视频

旧架构：Screen.Recording.2024-07-23.at.4.55.31.PM.mov
新架构：Screen.Recording.2024-07-25.at.9.34.58.AM.mov

react-native

来源：https://github.com/facebook/react-native/issues/45655

1条答案

按热度按时间

tpgth1q71#

嘿，@cortinico,这个问题还有一个副作用。我是react-native-unistyles的作者，Unistyles会在不同的事件(如字体缩放变化)上自动重新渲染视图。在新架构中，行为不同，文本会显示在边缘被截断。它最初不可见，因为用户需要像上面提到的那样重置应用程序，但在使用Unistyles时，第一次重新渲染后就可见了。
这是unistyles问题的链接：jpudysz/react-native-unistyles#256
复现方法：就像上面通过@yzhe554链接的一样
最小步骤：

export default function App() {
    const [counter, setCounter] = useState(0)
    
    return (
        <View 
            style={{
              flex: 1,
              backgroundColor: '#fff',
              alignItems: 'center',
              justifyContent: 'center',
            }}
        >
          <Text style={{fontSize: 24}}>RN 24 Label Testing!!!</Text>
          <Text style={{fontSize: 18}}>RN  18 Label Testing!!!</Text>
          <Text style={{fontSize: 16}}>RN 16 Label Testing!!!</Text>
          <Button onPress={() => setCounter(prevState => prevState + 1)} title="Re-render" />
          <StatusBar style="auto" />
        </View>
    )
}

尝试更改字体缩放并然后按重新渲染按钮。
新架构的结果：
Screen.Recording.2024-07-29.at.10.49.33.mov
旧架构：
Screen.Recording.2024-07-29.at.10.52.41.mov

赞(0）回复(0）举报 5个月前

我来回答

react-native 当更改字体缩放比例时，不支持热重载,

描述

重现步骤

React Native版本

受影响的平台

领域

`npx react-native info`的输出

堆栈跟踪或日志

重现者

截图和视频

1条答案

相关问题

热门标签

最新问答

react-native 当更改字体缩放比例时，不支持热重载,

描述

重现步骤

React Native版本

受影响的平台

领域

npx react-native info的输出

堆栈跟踪或日志

重现者

截图和视频

1条答案

相关问题

热门标签

最新问答

`npx react-native info`的输出