【源码】基于React Native框架的移动应用

项目简介

本项目是基于React Native框架开发的移动应用。React Native可让开发者运用JavaScript和React构建原生应用，有效兼顾开发效率与原生平台性能。

项目的主要特性和功能

1. 导航配置：利用react-navigation库，结合createStackNavigator和createBottomTabNavigator，实现头部导航、底部导航及二者结合效果，还能隐藏自路由的底部导航。
2. UI组件库：采用Ant Design Mobile RN，提供丰富的React Native组件，简化UI开发工作。
3. 状态管理：选用MobX作为状态管理库，提供响应式、可预测的状态管理方案。

安装使用步骤

安装依赖

1. 按项目常规方式安装React Native相关依赖，启动方式为：iOS react-native run-ios；安卓 react-native run-android。
2. 安装导航相关依赖：
   • yarn add react-navigation 或者 npm install --save react-navigation
   • yarn add react-native-gesture-handler 或者 npm install --save react-native-gesture-handler
3. 安装UI组件库：
   • npm install @ant-design/react-native --save 或者 yarn add @ant-design/react-native
   • react-native link @ant-design/icons-react-native
4. 安装状态管理库：
   • npm install mobx --save 或者 yarn add mobx
   • npm install mobx-react --save 或者 yarn add mobx-react
   • 若不使用TypeScript，需安装额外插件：
     • npm install babel-plugin-transform-decorators-legacy --save-dev
     • npm install @babel/plugin-proposal-decorators --save-dev
     • 在babel.config.js中配置： json "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true }] ]

配置原生依赖

1. 链接所有原生依赖：react-native link react-native-gesture-handler
2. 对于Android开发，需在MainActivity.java中添加以下配置： ```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);
        }
    };
}

} ```

运行应用

在iOS设备上使用Xcode运行react-native run-ios，在Android设备上使用Android Studio运行react-native run-android。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】