第三方庫查找網址:https://js.coach/?collection=React+Native
npm install -g react-native-cli 安裝react-native
react-native init 項目名稱 在項目文件夾初始化react-native項目工程
注意:初始化項目一定要做Mac上進行初始化,再通過npm run ios 運行和xcode進行運行。如果在Windows平臺進行初始化,運行Android沒有問題,運行iOS會報錯。
第一步: 安裝主庫
yarn add react-navigation
# or with npm
# npm install react-navigation
第二步: 安裝主庫依賴的三方庫
因爲新版react-navigation依賴一些第三方庫,所以安裝時需要同時引入:
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-safe-area-context
yarn add @react-native-community/masked-view
yarn add react-native-screens
# or with npm
# npm install react-native-gesture-handler
# npm install react-native-reanimated
# npm install react-native-safe-area-context
# npm install @react-native-community/masked-view
# npm install react-native-screens
第三步: 根據需要引入各導航組件的庫
yarn add react-navigation-stack
yarn add react-navigation-drawer
yarn add react-navigation-tabs
# or with npm
# npm install react-navigation-stack
# npm install react-navigation-drawer
# npm install react-navigation-tabs
第四步:執行pod install
爲了在iOS上完成安裝,還需要執行一些命令:
cd ios
pod install
cd ..
第五步:爲react-native-screens添加相關依賴
爲了在Android上完成安裝,還需要在android/app/build.gradle中爲react-native-screens添加相關依賴:
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
第六步:配置react-native-gesture-handler
爲了在Android上能夠使react-native-gesture-handler有效,需要修改MainActivity.java:
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate;
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
+ @Override
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
}
第七步:在index.js or App.js中導入react-native-gesture-handler
import 'react-native-gesture-handler';
yarn add react-native-vector-icons 安裝矢量圖標庫
iOS配置環境
List of all available fonts to copy & paste in info.plist
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>
Android環境配置
Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
安裝redux
yarn add redux
yarn add react-redux
yarn add redux-thunk
yarn add @react-native-community/async-storage
yarn add react-native-easy-toast
yarn add prop-types
yarn add GitHubTrending //學習項目趨勢模塊接口,其他項目不需要
yarn add react-navigation-redux-helpers
yarn add react-native-htmlview
yarn add react-native-webview
yarn add react-navigation-redux-helpers
yarn add react-native-event-bus
yarn add react-native-parallax-scroll-view
yarn add react-native-check-box
yarn add react-native-sortable-listview //拖拽排序
yarn add react-native-splash-screen //啓動白屏
yarn add react-native-code-push //熱更新