About theme customization主题定制

codthing commented 3 years ago

我尝试用antd-rn官方的两种方法实现主题定制，

使用Provider方法
配置文件+改变启动方式
但是都没能成功。

请问如何实现主题定制？

谢谢~

xuyuanxiang commented 3 years ago

我尝试用antd-rn官方的两种方法实现主题定制，
1. [使用Provider方法](https://rn.mobile.ant.design/components/locale-provider-cn/)
2. [配置文件+改变启动方式](https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui#antd-mobile-with-rn-custom-ui)
但是都没能成功。

请问如何实现主题定制？

谢谢~

我封装了一个针对@ant-design/react-native的umi插件：umi-plugin-antd-react-native

这个插件正是按照antd-rn官网做了你说的这两件事，我的动机是一切遵循umi的规约：在配置文件中通过theme字段来自定义主题，不需要装配Provider，这些高阶组件等等...

详情：自定义主题/皮肤

codthing commented 3 years ago

many thx!

我尝试用antd-rn官方的两种方法实现主题定制，
1. [使用Provider方法](https://rn.mobile.ant.design/components/locale-provider-cn/)
2. [配置文件+改变启动方式](https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui#antd-mobile-with-rn-custom-ui)
但是都没能成功。

请问如何实现主题定制？

谢谢~
我封装了一个针对@ant-design/react-native的umi插件：umi-plugin-antd-react-native

这个插件正是按照antd-rn官网做了你说的这两件事，我的动机是一切遵循umi的规约：在配置文件中通过theme字段来自定义主题，不需要装配Provider，这些高阶组件等等...

详情：自定义主题/皮肤

Many Thx!

codthing commented 3 years ago

@xuyuanxiang

我在· `umirc.js` 文件中配置 `Button` 的样式做测试：

export default {
  dva: {
    immer: true
  },
  theme: {
    primary_button_fill: '#000000' //配置为黑色
  }
}

我有重新编译 yarn android

可是， /pages/feedback.js 中 <Button type="primary">提交</Button> 并未改变为黑色，如图：

xuyuanxiang commented 3 years ago

@xuyuanxiang

我在· umirc.js 文件中配置 Button 的样式做测试：
export default {
  dva: {
    immer: true
  },
  theme: {
    primary_button_fill: '#000000' //配置为黑色
  }
}
我有重新编译 yarn android

可是， /pages/feedback.js 中 <Button type="primary">提交</Button> 并未改变为黑色，如图：

我试了下，没有复现。

修改完.umirc.js中的配置后， rn 的 dev server不需要重启，但需要取消之前umi g rn --dev的watch进程重新执行umi g rn --dev生成新的临时文件才行，可以查看项目根目录下的tmp/目录，所有umi生成的临时文件全都在这里： 可以看到，图中由umi-plugin-antd-react-native写的runtime.ts文件中，使用了antd-rn的Provider并传入了theme属性。

rn dev server自动刷新后，视图就更新为修改的颜色了。

xuyuanxiang commented 3 years ago

umi-react-native中umi g rn --dev命令的功能还不完善，只能检测源码文件的变动并重新生成新的临时文件。

对于umi配置文件（.umirc.js）的改动还是无感的，需要手动重新执行umi g rn --dev

codthing commented 3 years ago

umi-react-native中umi g rn --dev命令的功能还不完善，只能检测源码文件的变动并重新生成新的临时文件。

对于umi配置文件（.umirc.js）的改动还是无感的，需要手动重新执行umi g rn --dev

原来如此，谢谢指点！

xuyuanxiang / umi-react-native