react-native完整项目用到的命令

最新推荐文章于 2024-09-10 05:36:05 发布

Bearin

最新推荐文章于 2024-09-10 05:36:05 发布

阅读量735

点赞数

文章标签： react native

本文链接：https://blog.csdn.net/bearin/article/details/105056899

版权

第三方库查找网址：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: