由于本周(05/23-05/27)没有太多需要记录的问题, 所以与下周一同记录.
Input 输入值之后自动取消聚焦
tag: [React, React Native]
我的代码大概如下, TextInputRender 是 Input 组件, 这个原因是因为每次状态改变的时候都会刷新视图, 而刷新视图后 WNumberTextInput就会重新渲染一次, 导致其失去焦点.
<StyledInput
TextInputRender={() => <WNumberTextInput
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
style={[tw.flex1]}
keyboardType={"numeric"}
/>}
placeholder={placeholder}
value={value}
onChangeText={setValue}
Right1={() => <WTextWidget style={{ textTransform: "uppercase" }}>{coinName}</WTextWidget>}
Right2={() => <TouchableOpacity onPress={handleAllPress}>
<WTextWidget style={{ color: Colors.primary }}>{t(LocaleKeys.original.all)}</WTextWidget>
</TouchableOpacity>}
/>
解决方法就是直接传入 JSX 对象(React.ReactElement), 而不是传入 (React.ComponentType)
<StyledInput
TextInputRender={<WNumberTextInput
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
style={[tw.flex1]}
keyboardType={"numeric"}
/>}
placeholder={placeholder}
value={value}
onChangeText={setValue}
Right1={<WTextWidget style={{ textTransform: "uppercase" }}>{coinName}</WTextWidget>}
Right2={<TouchableOpacity onPress={handleAllPress}>
<WTextWidget style={{ color: Colors.primary }}>{t(LocaleKeys.original.all)}</WTextWidget>
</TouchableOpacity>}
/>
Keyboard 的 keyboardDidShow 和 keyboardDidHide 不生效
tag: [React Native]
这个问题的原因在文档里已经发现了, 不过需要注意的是, 笔者在开发时使用的是 expo, 解包后发现 android:windowSoftInputMode被默认设置为了 adjustResize, 所以一切都是符合逻辑的.
Object.keys 表现与 V8 不同
笔者在开发 RN 项目的时候一般会在 Web 环境中调试, 所以开发结束时会遇到一些兼容性问题, 而这个问题恰好完美命中了兼容性, 问题的表现方式就是在 Web(V8) 上 Object.keys 对同一返回的数组数组顺序相同, 但是在 RN(JSC) 引擎上顺序就是随机的, 解决方法就是 Object.keys().sort() 进行排序, 不过笔者实测换成 hermes引擎 Object.keys 对同一对象输出的数组始终相等, 但是建议大家在使用时还是先手动排序下.
