react-native踩坑记录

原罪

键盘遮挡

描述

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/

未完待续...

阅读 5.4k

全栈那些事
授人以鱼不如授人以渔

极客

3.2k 声望
1.2k 粉丝
0 条评论

极客

3.2k 声望
1.2k 粉丝
文章目录
宣传栏