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/

---

未完待續...