React Native中文社群:
https://reactnative.cn/docs/getting-started
React Native中文社群論壇:
http://bbs.reactnative.cn/category/4/求助專區
React Native 豆瓣demo:
https://github.com/xkdaq/react-native-douban
我的第一個React Native專案:
https://github.com/xkdaq/react-native-news

一、元件以及三方庫

• react-navigation 頁面切換
• react-native-router-flux
  路由跳轉
• react-native-vector-icons 圖示庫
• react-native-side-menu 側邊欄滑動
• react-native-splash-screen 啟動頁
• react-native-swiper輪播圖
• react-native-scrollable-tab-view 類似android中的tablayout的tab切換庫
• react-native-modal-dropdown 下拉框
• react-native-i18n 國際化切換語言工具庫
• react-native-wechat微信分享支付庫
• Axios
  基於 promise 的 HTTP 庫
• teaset UI庫

三、學習專案(2018.10.22)

• 1.【reading】這個專案主要學習react-native-scrollable-tab-view 元件,執行前需要去萬維易源申請api)
  我的appId:78112
  我的app祕鑰:dbba1f1a4b83451ebfb5bbf934761add
  專案地址:https://github.com/attentiveness/reading

• 2.【OneM】這個專案稍微東西有點多,反正我新手只看得懂一點點,其中第二個和第三個模組好像有報錯,但是不影響整個專案的執行
  專案地址:

  https://github.com/guangqiang-liu/OneM

• 3.【RNExample】這個專案裡面是一些小功能和工具的集合
  專案地址:https://github.com/puti94/RNExample

十、問題

• 1.ReactNative:The development server returned response error code: 500
  原因:react-native的版本號0.57.0和0.57.1需要手動安裝@babel/runtime和schedule,在專案的package.json檔案可以檢視react-native的版本號
  解決:專案路徑下執行yarn add -D @babel/runtime [email protected]

• 2.用webstorm建立react native專案之後直接執行android專案會報錯
  報錯:SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable
  解決:將android studio專案裡面的local.properties檔案複製一份到react native專案下的android目錄下

• 3.搜尋框SearchBar在android8.0上面使得鍵盤頂起主頁底部導航欄(react-native-tab-navigator)
  解決: 在android專案的清單檔案的主頁MainActivity直接修改android:windowSoftInputMode屬性值

<activity
   android:name=".MainActivity"
   android:label="@string/app_name"
   android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
   android:windowSoftInputMode="stateAlwaysHidden|adjustPan">
   <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
 </activity>

• 4.React Native :
  Could not expand ZIP ‘C:\Users\kekex.gradle\caches\modules-2\files-2.1\com.aliyun.dpa\oss-android-sdk\2.8.0\23da7bb0c724346357a65db093e7445bf98f0c99\oss-android -sdk-2.8.0.aar’
  解決辦法：

  1. cd android
  2. gradlew clean
  3. cd …
  4. react-native run-android

• 5.react-native-scrollable-tab-view
  問題:https://github.com/happypancake/react-native-scrollable-tab-view/issues/937

error: bundling failed: SyntaxError: **\node_modules\react-native-scrollable-tab-view\
SceneComponent.js: A trailing comma is not permitted after the rest element (9:32)
   7 |
   8 | const SceneComponent = (Props) => {
>  9 |   const {shouldUpdated, ...props, } = Props;
     |                                 ^
  10 |   return <View {...props}>
  11 |       <StaticContainer shouldUpdate={shouldUpdated}>
  12 |         {props.children}

暫時處理方法是找到react-native-scrollable-tab-view\SceneComponent.js檔案刪除逗號

const SceneComponent = (Props) => {
  const {shouldUpdated, ...props} = Props;
  return <View {...props}>
      <StaticContainer shouldUpdate={shouldUpdated}>
        {props.children}
      </StaticContainer>
  </View>;
};

• 6.build報錯

Could not find play-services-basement.aar (com.google.android.gms:play-services-basement:11.0.1).

我的是在專案的根目錄build.gradle檔案新增google()就好了

repositories {
        jcenter()
        google()
        maven { url 'https://maven.google.com'  }
}

allprojects {
    repositories {
        jcenter()
        google()
        mavenLocal()
        maven { url 'https://maven.google.com'  }
    }
}

參考:https://stackoverflow.com/questions/50563407/could-not-find-play-services-basement-aar

• 7.Text不能填充整個螢幕的問題

 render() {
        return (
            <View style={{flex: 1, width: width, backgroundColor: 'powderblue'}}>
                <Text style={{
                    width: width,
                    color: 'white',
                    marginTop: 50,
                    backgroundColor: 'steelblue'
                }} numberOfLines={2}>我是一條很長的文字,很長的標題,但是我不能填充螢幕,原因是模擬的問題</Text>
            </View>
        );
    }

最後在Genymotion模擬器中執行時這樣的:

為了找原因給了背景顏色,最後用真機除錯是好的