这个也是一个基础项目

地址如下https://github.com/ndlonghi/react-native-template-app



点击登陆跳转到首页



分析代码如

react-native-template-app/src/components/loading/index.js

loading效果

import React from 'react';
import {
ActivityIndicator,
Image,
StyleSheet,
View
} from 'react-native'; function Loading(props) { return (
<View
style={styles.container}
>
<Image
source={require('../../assets/imgs/logo.png')}
style={styles.logo}
/>
<ActivityIndicator/>
</View>
) } const styles = StyleSheet.create({
container: {},
logo: {}
}); export default Loading;
//app.js
import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
//redux
//loading
//跳转路由
import {store, persistor} from "./src/store";
import Loading from "./src/components/loading/index";
import RootNavigator from "./src/navigation/containers"; export default class App extends Component {
render() {
return (
<Provider
store={store}
>
<PersistGate
loading={<Loading/>}
persistor={persistor}
>
<RootNavigator/>
</PersistGate>
</Provider>
);
}
}

src/store.js

import {
applyMiddleware,
createStore
} from 'redux';
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import {createReactNavigationReduxMiddleware} from 'react-navigation-redux-helpers'; import rootReducer from './reducers'; const persistConfig = {
key: 'root',
storage,
blacklist: ['navigation']
}; const persistedReducer = persistReducer(persistConfig, rootReducer); const navigationMiddleware = createReactNavigationReduxMiddleware(
'root',
state => state.navigation
); const store = createStore(
persistedReducer,
applyMiddleware(navigationMiddleware)
); const persistor = persistStore(store); export {store, persistor};

src/reducers/index.js

import {combineReducers} from 'redux';

import auth from "../services/auth/reducers";
import navigation from "../navigation/reducers"; export default combineReducers({
auth,
navigation
});

数据处理

src/services/api/index.js

import {Environments} from "../../environments/environments";
import type {Credentials} from "../../models/credentials";
import type {AuthObject} from "../../models/auth-object";
import type {ApiErrorResponse} from "../../models/api-error-response"; class Api { static getBackendConfig() {
return Environments[Environments.env].backend;
} handleError(error: any): ApiErrorResponse {
let errorResponse: ApiErrorResponse = {
error: error,
text: 'An error ocurred. Please try again later.'
};
return errorResponse;
} async get(url: string): any | ApiErrorResponse {
return fetch(url, {
method: 'GET'
})
.then((response) => {
return response.json();
})
.catch((error: any) => {
reject(this.handleError(error));
})
} async post(url: string, data: any): any | ApiErrorResponse {
return fetch(url, {
method: 'POST',
body: JSON.stringify(data)
})
.then((response) => {
return response.json();
})
.catch((error: any) => {
reject(this.handleError(error));
})
} async login(credentials: Credentials): Promise<AuthObject | ApiErrorResponse> {
//const query = await this.post(Api.getBackendConfig().url + Endpoints.LOGIN, credentials);
//const {data} = await query.json();
//return data;
// Simulate api call
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({token: 'sanoteru'});
}, 1000);
})
} } const Endpoints = {
LOGIN: ''
}; export default new Api();
//src/services/auth/actions/action-tyes.js
export const SET_AUTH = 'SET_AUTH';
export const REMOVE_AUTH = 'REMOVE_AUTH';
///src/services/auth/actions/index.js
import {
REMOVE_AUTH,
SET_AUTH
} from "./action-tyes";
import type {AuthObject} from "../../../models/auth-object"; export const setAuth = (authObject: AuthObject) => ({
type: SET_AUTH,
payload: {
authObject
}
}); export const removeAuth = () => ({
type: REMOVE_AUTH
});
//src/services/auth/reducers/index.js
import {
REMOVE_AUTH,
SET_AUTH
} from "../actions/action-tyes"; function auth(state = {}, action) {
switch (action.type) {
case SET_AUTH: {
return {
authObject: action.payload.authObject
}
}
case REMOVE_AUTH: {
return {
authObject: null
}
}
default: {
return state;
}
}
} export default auth;
//src/screens/loading.js
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux'; import {navigateToHome, navigateToLogin} from "../navigation/actions/index";
import LoadingLayout from '../components/loading/index'; const mapStateToProps = state => {
return {
auth: state.auth
}
}; const mapDispatchToProps = dispatch => {
return bindActionCreators({navigateToLogin, navigateToHome}, dispatch);
}; class Loading extends Component { componentDidMount() {
this.redirect();
} redirect = () => {
if (this.props.auth.authObject) {
this.props.navigateToHome();
} else {
this.props.navigateToLogin();
}
}; render() {
return <LoadingLayout/>
} } export default connect(mapStateToProps, mapDispatchToProps)(Loading);
//src/screens/login.js
import React, {Component} from 'react';
import {
Button,
Image,
SafeAreaView,
StyleSheet,
TextInput,
View
} from 'react-native';
import {connect} from 'react-redux';
import {bindActionCreators} from "redux"; import {removeAuth, setAuth} from "../services/auth/actions/index";
import {navigateToHome} from "../navigation/actions/index";
import type {AuthObject} from "../models/auth-object";
import type {ApiErrorResponse} from "../models/api-error-response";
import Api from '../services/api/index'; const mapDispatchToProps = dispatch => {
return bindActionCreators({setAuth, removeAuth, navigateToHome}, dispatch);
}; class Login extends Component { handleSubmit = () => {
Api.login({
email: 'mobile@4rsoluciones.com',
password: 'aoeu'
})
.then((auth: AuthObject) => {
this.props.setAuth(auth);
this.props.navigateToHome();
})
.catch((error: ApiErrorResponse) => {
this.props.removeAuth();
})
}; render() {
return (
<SafeAreaView style={styles.container}>
<View>
<Image
source={require('../assets/imgs/logo.png')}
style={styles.logo}
/>
<TextInput
style={styles.input}
placeholder="Username"
placeholderTextColor="white"
/>
<TextInput
style={styles.input}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry={true}
/>
<Button
onPress={this.handleSubmit}
title="Log in"
/>
</View>
</SafeAreaView>
)
} } const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
logo: {
width: 200,
height: 80,
resizeMode: 'contain',
marginBottom: 10,
},
input: {
marginBottom: 10,
width: 250,
height: 50,
paddingHorizontal: 10,
borderRadius: 5,
backgroundColor: '#838383',
color: 'white',
}
}); export default connect(null, mapDispatchToProps)(Login);

login引用的是这里的api

import {Environments} from "../../environments/environments";
import type {Credentials} from "../../models/credentials";
import type {AuthObject} from "../../models/auth-object";
import type {ApiErrorResponse} from "../../models/api-error-response"; class Api { static getBackendConfig() {
return Environments[Environments.env].backend;
} handleError(error: any): ApiErrorResponse {
let errorResponse: ApiErrorResponse = {
error: error,
text: 'An error ocurred. Please try again later.'
};
return errorResponse;
} async get(url: string): any | ApiErrorResponse {
return fetch(url, {
method: 'GET'
})
.then((response) => {
return response.json();
})
.catch((error: any) => {
reject(this.handleError(error));
})
} async post(url: string, data: any): any | ApiErrorResponse {
return fetch(url, {
method: 'POST',
body: JSON.stringify(data)
})
.then((response) => {
return response.json();
})
.catch((error: any) => {
reject(this.handleError(error));
})
} async login(credentials: Credentials): Promise<AuthObject | ApiErrorResponse> {
//const query = await this.post(Api.getBackendConfig().url + Endpoints.LOGIN, credentials);
//const {data} = await query.json();
//return data;
// Simulate api call
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({token: 'sanoteru'});
}, 1000);
})
} } const Endpoints = {
LOGIN: ''
}; export default new Api();
//src/screens/home.js
import React, {Component} from 'react';
import {
Button,
SafeAreaView,
StyleSheet,
Text,
View
} from 'react-native';
import {connect} from 'react-redux';
import {bindActionCreators} from "redux"; import {removeAuth} from "../services/auth/actions/index";
import {navigateToLogin} from "../navigation/actions/index"; const mapDispatchToProps = dispatch => {
return bindActionCreators({removeAuth, navigateToLogin}, dispatch);
}; class Home extends Component { handleLogout = () => {
this.props.removeAuth();
this.props.navigateToLogin();
}; render() {
return (
<SafeAreaView style={styles.container}>
<View>
<Text>This is the home</Text>
<Button
onPress={this.handleLogout}
title="Log out"
/>
</View>
</SafeAreaView>
)
} } const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
}
}); export default connect(null, mapDispatchToProps)(Home);

关于navigation部分还进行了很多处理,项目不容易啊~

【水滴石穿】react-native-template-app的更多相关文章

  1. React Native发布APP之打包iOS应用

    用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤.本文将向大家分享如何签名打包一款React Na ...

  2. React Native & CodePush & App Center

    React Native & CodePush & App Center https://docs.microsoft.com/en-us/appcenter/distribution ...

  3. React Native的APP打包教程

    1.改软件的名称 2.改软件的图标 3.给做好的项目打成APP包 改软件的名称 找到项目的改名的位置 然后用记事本打开strings.xml,然后改自己想要的名字 改软件的图标 找到如下5个文件,然后 ...

  4. React Native & Web APP

    React Native Build native mobile apps using JavaScript and React https://facebook.github.io/react-na ...

  5. react native改变app的图标和名称

    beauty\android\app\src\main\res

  6. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  7. 用CodePush在React Native App中做热更新

    最近在学React Native,学到了CodePush热更新. 老师讲了两种实现的方法,现将其记录一下. 相比较原生开发,使用React Native开发App不仅能节约开发成本,还能做原生开发不能 ...

  8. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

  9. React Native填坑之旅 -- 使用iOS原生视图(高德地图)

    在开发React Native的App的时候,你会遇到很多情况是原生的视图组件已经开发好了的.有的是系统的SDK提供的,有的是第三方试图组件,总之你的APP可以直接使用的原生视图是很多的.React ...

  10. H5、React Native、Native应用对比分析

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...

随机推荐

  1. jeecmsv9-adminVue 打包出错

    F:\jeecms\jeecmsv9-adminVue>node build\build.js - building for production...Error processing file ...

  2. NGINX模块开发 之 验证URL參数

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/RoyalApex/article/details/26404379 作者:邹祁峰 邮箱:Qifeng ...

  3. 浓缩版 《C和指针》基础篇(Chpt.1~Chpt.9)

    导语 近日,笔者在课业之余阅读了<C和指针(Pointers on C)> (by Kenneth A.Reek)一书,从中记录了关于C语言的诸多知识点,包括在C语言基础特性的学习过程中没 ...

  4. Java 函数优雅之道

    导读 随着软件项目代码的日积月累,系统维护成本变得越来越高,是所有软件团队面临的共同问题.持续地优化代码,提高代码的质量,是提升系统生命力的有效手段之一.软件系统思维有句话“Less coding, ...

  5. 关闭浏览器或者关闭使用window.open打开的页面时添加监听事件

    最近工作中有个需求:点击按钮时打开一个页面,此处取名为page1,打开页面的前提条件是如果有人已经打开过page1页面并且没有关闭时请求ajax判断session是否为空,如果为空则将用户名和文档id ...

  6. python 实现发送短信验证码

    [说明]短信接口使用的是“聚合数据”上面的接口. 那么在使用接口前,需要在聚合数据上面注册,进行申请接口.当然在正式使用之前,我们可以使用申请免得的进行测试. 一.申请成功后,需做的准备工作如下: 1 ...

  7. ubuntu查看并杀死进程

    Ubuntu 查看和杀死进程 今天在netbeans中关闭webrick时,发现没有关闭掉,打入localhost:3000 依然显示页面,发现无法从nb中再次关闭 只有进入ubuntu的进程下关闭 ...

  8. 使用Spring Data Redis时,遇到的几个问题

    需求: 1,保存一个key-value形式的结构到redis 2,把一个对象保存成hash形式的结构到redis 代码如下: // 保存key-value值         pushFrequency ...

  9. 破逼Json,该死的Json库,操了

    jansson,就这个库,破几把玩意,本来很简单的Json,就是简单的字符串操作,ATL一个CString就能解决,QT的QSting也能解决,DELPHI的String也能解决.而这B,非把那么简单 ...

  10. 2019.10.21 csp-s模拟测试81 反思总结

    T1: 把每一行状压,按行DP.设fi,j,k,i表示第几行,j是当前行的1覆盖状态,k是当前行选择按钮的状态.转移的时候枚举j和k,再枚举下一层的按钮选择情况l.如果l和j可以全覆盖当前层则转移合法 ...