Skip to content

这是一个企业级别ios端RN开源项目。可用于学习,不可商用。 ( 目前仍处于个人开发阶段,下面有部分页面gif截图。PS:本想发布到苹果应用市场但是一年688好贵😢,阿里云一年折扣后才99好不。。。所以各位大大自行安装到mac本地玩吧哈哈)

Notifications You must be signed in to change notification settings

mbw3641193/HjyRnApp

Repository files navigation

HJY-App

本项目为企业级别项目,虽然开源但是禁止作为商用,如有发现追究责任。

"react-native": "0.59.5"

0.引导页

1.首页

2.第二屏

3.列表页面

4.第四屏

5.账户页面

启动项目

react-native run-ios

重启packager

npm run start

真机运行需要注意的事项:

需要登录自己的Apple ID,并且导出。按照官网指导调试即可,有问题参考

如何配置React Native真机调试-iOS

项目依赖

  1. 框架依赖

react-navigation

yarn add react-navigation
// or with npm
// npm install --save react-navigation

yarn add react-native-gesture-handler
// or with npm
// npm install --save react-native-gesture-handler

react-native link react-native-gesture-handler

为switch路由添加动画效果

这两个组件位于npm仓库,不在github托管
yarn add react-native-reanimated

react-native link react-native-reanimated

yarn add react-navigation-animated-switch

REDUX

yarn add redux react-redux
// npm install --save redux react-redux

yarn add redux-persist //为redux增加持久化功能

AXIOS (由于自带的FETCH没有拦截器以及响应超市,所以选择使用第三方的AXIOS)

yarn add axios
// npm install --save axios


  1. 组件依赖

引导页以及轮播组件

$ npm i react-native-swiper --save
Swiper 白屏问题解决方法:给组件Swiper添加一个属性即可:
removeClippedSubviews={false}

登录之手势密码

$ yarn add react-native-gesture-password

登录之指纹密码

有问题参考:
  1. react-native-touch-id官方API
  2. RN第三方组件之react-native-touch-id
yarn add react-native-touch-id

react-native link react-native-touch-id

启动屏

有问题参考:
  1. react-native-splash-screen官方API
  2. react-native-splash-screen集成实践(ios & android)
yarn add react-native-splash-screen

react-native link react-native-splash-screen


//iOS:
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

  1. 样式依赖

react-native-elements 第三方样式库

yarn add react-native-elements

第三方图标库

yarn add react-native-vector-icons  

react-native link react-native-vector-icons

占位组件 placeholder

yarn add rn-placeholder

//////////
{/* <Placeholder
    isReady={isReady}
    animation="fade"
    whenReadyRender={() => <ComponentLoaded />}
    renderLeft={() => <Media hasRadius />}
    renderRight={() => <Media />}
    >
    <Line width="70%" />
    <Line />
    <Line />
    <Line width="30%" />
</Placeholder> */}

渐变色 react-native-linear-gradient

yarn add react-native-linear-gradient

react-native link react-native-linear-gradient

About

这是一个企业级别ios端RN开源项目。可用于学习,不可商用。 ( 目前仍处于个人开发阶段,下面有部分页面gif截图。PS:本想发布到苹果应用市场但是一年688好贵😢,阿里云一年折扣后才99好不。。。所以各位大大自行安装到mac本地玩吧哈哈)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published