react-native踩坑记录

2024年4月10日 224次阅读 来源: 原罪

键盘遮挡

描述

ios靠近手机屏幕下方的输入框获得焦点时，键盘弹出，但是输入框并没有往上移。意味着比键盘低的内容都会被遮挡，而且你没办法手动往上移。结果就是在键盘消失之前，你根本看不到自己输入了什么鬼内容。

解决

使用第三方插件

npm install react-native-keyboard-aware-scroll-view --save

代替原来的ScrollView组件：

// import {ScrollView} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

class App extends Component {
  render() {
    return (
      <KeyboardAwareScrollView>
        <TextInput />
      </KeyboardAwareScrollView>
    );
  }
}

完美解决。更多高级用法请点击这里看github。

文字不统一

描述

如果直接使用<Text>原罪</Text>渲染文字，那么android和ios的字体粗细和颜色是不一样的。ios下字体较粗较黑，android下字体比较正常。

解决

自己封装一个无状态组件

export const TextUI = ({style, children, ...props}) => {
  return (
    <Text
      {...props}
      style={[
        {
          color: '#555555',
          fontSize: 14,
          fontWeight: '100',
        },
        style,
      ]}
    >
      {children}
    </Text>
  );
};

解决这个问题时，有找过文献，有的是扩展Text.prototype.render来添加style，传送门。但是笔者尝试时，android机是直接报错了，ios可用。笔者RN版本：0.55.4

ios模拟器动画

描述

刚初始化的iphone模拟器，当你弹一个alert出来，估计是慢的不要不要的。重点弹出来后，点击确定按钮还不一定会响应(T_T)，你要等个几十秒才有反应。很显然，这已经影响到各位看官的开发效率了。

解决

模拟器获得焦点，然后在顶部状态栏中找到 Debug -> showAnimations 的勾选取消掉即可。

ios上传到appStore失败

描述

就是上传一直卡在那边不动，最后也不成功

解决

删除临时目录

mv ~/.itmstransporter/ ~/.old_itmstransporter/

未完待续…

    原文作者：原罪
    原文地址: https://segmentfault.com/a/1190000015402712
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞