Ant-design-mobile: [React-Native]InputItem如何控制字体样式？（大小、颜色）

Created on 19 Apr 2017 · 13Comments · Source: ant-design/ant-design-mobile

请问如何配置InputItem的字体样式？包括placeholder的样式？

react native

Source

kimjuny

Most helpful comment

😂试了下这样写确实酸爽... @silentcloud

import { StyleSheet } from 'react-native';
import InputItem from 'antd-mobile';
import InputItemStyle from 'antd-mobile/lib/input-item/style/index';

const newStyle = {};
for (const key in InputItemStyle) {
  if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
    // StyleSheet.flatten返回的obj描述中的configurable、writable为false，所以这里要展开赋值
    newStyle[key] = { ...StyleSheet.flatten(InputItemStyle[key]) };
    if (key === 'input') {
      newStyle[key].fontSize = 15;
    }
  }
}

const MyComponent = () => (
  <InputItem styles={StyleSheet.create(newStyle)} />
)

kimjuny on 19 Apr 2017

👍3

All 13 comments

https://github.com/ant-design/antd-mobile-samples/tree/master/rn-custom-ui

paranoidjk on 19 Apr 2017

@paranoidjk 如果修改theme的字体大小了，很多相关其他控件大小都变了。。

kimjuny on 19 Apr 2017

看你修改的那个变量，有些本来就是通用的。请仔细看主题变量 https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.tsx#L137

paranoidjk on 19 Apr 2017

@paranoidjk
不是input_font_size，是font_size_heading，这个好像是个通用变量吧？好像有不小的影响。是否考虑改成指向input_font_size?

kimjuny on 19 Apr 2017

抱歉，没太理解你描述的事情。请详细解释下你的需求和现在的问题吧。

paranoidjk on 19 Apr 2017

@paranoidjk
我遇到的问题：我想修改InputItem的字体大小，要修改这个我就要修改的theme variable中的font_size_heading（而不是input_font_size，你可以试验一下）。这个font_size_heading是个通用字段，我看了下源码，除了input-item外在很多其他控件中也使用到了（比如tabs、accordion、action-sheet等等），我修改font_size_heading虽然可以当下解决InputItem的字体大小自定义问题，但是会导致其他控件也受到影响。
我的建议是：可以把InputItem的字体大小指向input_font_size而不是font_size_heading，这个在src/components/style/themes/default.tsx #139行中有定义，但是在源码中却没有实际在用。

kimjuny on 19 Apr 2017

PR
@paranoidjk @silentcloud

kimjuny on 19 Apr 2017

@kimjuny 单个组件也可以自定义样式的，拿到组件的 style/index.js 然后 StyleSheet.flatten，然后改变对应的样式，再传回给组件的 styles prop

目前单个组件自定义样式有点绕，2.0 会将 style/index.tsx 里改成纯对象，这样就不用 flatten 了

silentcloud on 19 Apr 2017

😂试了下这样写确实酸爽... @silentcloud

import { StyleSheet } from 'react-native';
import InputItem from 'antd-mobile';
import InputItemStyle from 'antd-mobile/lib/input-item/style/index';

const newStyle = {};
for (const key in InputItemStyle) {
  if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
    // StyleSheet.flatten返回的obj描述中的configurable、writable为false，所以这里要展开赋值
    newStyle[key] = { ...StyleSheet.flatten(InputItemStyle[key]) };
    if (key === 'input') {
      newStyle[key].fontSize = 15;
    }
  }
}

const MyComponent = () => (
  <InputItem styles={StyleSheet.create(newStyle)} />
)

kimjuny on 19 Apr 2017

👍3

@kimjuny 恩，对的，是这么个。2.0 我直接把 antd-mobile/lib/input-item/style/index 这类文件变成纯样式对象，去掉 StyleSheet.create（放在组件里去），这样更方便

silentcloud on 19 Apr 2017

https://github.com/ant-design/ant-design-mobile/issues/1182

paranoidjk on 19 Apr 2017

@kimjuny 现在有新的写法么我用的是你上面写的