如何自定义React Native Paper开关组件(Switch)的Android样式?

huangapple go评论79阅读模式
英文:

How to customize React Native Paper Switch components for android?

问题

当我使用来自React Native Paper的这段代码时,我期望开关组件的外观与Material Design 3的开关完全相同,但不幸的是它并不是,并且看起来像旧版本的开关。我想知道如何自定义这个组件的外观,使其看起来像md3的React Native Paper开关

MD3的官方文档

import * as React from 'react';
import { Switch } from 'react-native-paper';

const MyComponent = () => {
  const [isSwitchOn, setIsSwitchOn] = React.useState(false);

  const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);

  return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
};

export default MyComponent;

如果有人能帮助我,非常感谢 如何自定义React Native Paper开关组件(Switch)的Android样式?

我无法将这个组件自定义为md3设计的外观。

英文:

When I use this code from react native paper I expect the switch component to be exactly look likse the **Material design 3 **switch, but unfortunately it is not and looks like older version, I was curios how to customize this component to looks like the md3react native paper switch
Official docs of MD3

import * as React from &#39;react&#39;;
import { Switch } from &#39;react-native-paper&#39;;

const MyComponent = () =&gt; {
  const [isSwitchOn, setIsSwitchOn] = React.useState(false);

  const onToggleSwitch = () =&gt; setIsSwitchOn(!isSwitchOn);

  return &lt;Switch value={isSwitchOn} onValueChange={onToggleSwitch} /&gt;;
};

export default MyComponent;

if anyone can help me, much appreciated 如何自定义React Native Paper开关组件(Switch)的Android样式?

I could not custmize this comonent to look like md3 design

答案1

得分: 0

目前,React Native Paper不支持Switch组件的MD3。你可以在以下链接中找到相关讨论:

https://github.com/callstack/react-native-paper/issues/3689#issuecomment-1436567611

https://github.com/callstack/react-native-paper/issues/3797

英文:

Currently, React Native Paper doesn't support MD3 for the Switch component

https://github.com/callstack/react-native-paper/issues/3689#issuecomment-1436567611

https://github.com/callstack/react-native-paper/issues/3797

huangapple
  • 本文由 发表于 2023年8月8日 20:32:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76859604.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定