这是一个企业级别ios端RN开源项目。可用于学习，

0.引导页

1.首页

2.第二屏

3.列表页面

4.第四屏

5.账户页面

react-native run-ios 重启packager

npm run start 真机运行需要注意的事项：

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

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

框架依赖

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

组件依赖

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

removeClippedSubviews={false} 登录之手势密码

$ yarn add react-native-gesture-password 登录之指纹密码 有问题参考： react-native-touch-id官方API RN第三方组件之react-native-touch-id

yarn add react-native-touch-id react-native link react-native-touch-id 启动屏 有问题参考： react-native-splash-screen官方API 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

样式依赖

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