【问题标题】:React-Native resize emoji and text size in TextInput togetherReact-Native 在 TextInput 中一起调整表情符号和文本大小
【发布时间】:2020-03-13 23:33:39
【问题描述】:

我想在 TextInput 中调整带有表情符号的文本大小,只有文本可以正常工作,但插入表情符号时不行。

const [fontSize, setFontSize] = useState(16);
const input = useRef(null);

// resize Input func
const onFontSizeChange = () => {
    setFontSize(fontSize + 5);

    input.current.setNativeProps({
      style: {
        fontSize: fontSize + 5, 
      },
    });

}

<TextInput 
    ref={input}
    multiline={true} 
    style={{fontSize: 16}}
    forceStrutHeight={true}  
    value={textValue}
    onChangeText={typedText => {
        validate(typedText);
    }}
/>

我该怎么做?

【问题讨论】:

  • onFontSizeChange 什么时候调用?
  • 当我完成输入文本,然后点击 TouchableOpacity => 这个调用 onFontSizeChange func

标签: react-native emoji textinput


【解决方案1】:

只需使用状态对象作为样式,并在单击按钮时更改样式对象。

const [style, setStyle] = useState({ fontSize: 16})

const onButtonClick = () => {
    setStyle({ fontSize: 20, lineHeight: 23 })
}

<TextInput 
    multiline={true} 
    style={style}
    forceStrutHeight={true}  
    value={textValue}
    onChangeText={typedText => {
        validate(typedText);
    }}
/>

【讨论】:

猜你喜欢
  • 2022-01-02
  • 2015-06-11
  • 1970-01-01
  • 1970-01-01
  • 2022-11-23
  • 2018-07-01
  • 2018-11-23
  • 1970-01-01
  • 2021-09-17
相关资源
最近更新 更多