react-native 0.57.8 配置 最新导航 react-navigation 3.x 以及 redux

Posted rnxb

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native 0.57.8 配置 最新导航 react-navigation 3.x 以及 redux相关的知识,希望对你有一定的参考价值。

以下是我的react-navigation 版本  redux  版本

"react": "16.6.3",
"react-native": "0.57.8",
"react-navigation": "^3.4.1",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-thunk": "^2.3.0"


先说 redux 吧 我默认使用redux 全局管理 但没有把全局导航放入redux 中 目前我碰到的需求 还没有必须使用这一点
但是我会向大家介绍一个 导航截断器 通过这个是可以访问全局导航的 (我主要的应用场景 判断 点单登录 )

redux的配置基本上你可以在其他的博客中 有所了解 有些比较旧 但是万变不离其宗 我会放入 部分主要的代码的配置代码给大家观看
如果你的 redux redux 插件 版本 和我的不匹配 请查阅相应版本的api
我的项目结构工程是这样的
action 处理请求的分发 redux-thunk
components 常用组件封装
constants 请求API
reducers 状态管理
root 项目入口文件 主要配置导航 redux tabbar 侧边栏
views 界面

app入口类文件
import React, {Component} from ‘react‘;
import {Provider} from ‘react-redux‘
import {store, persistor} from ‘./store/ConfigureStore‘;// store 配置 导出两个属性 一个是 store 一个是 缓存
import { PersistGate } from ‘redux-persist/lib/integration/react‘; // redux-persist 的API 可以去官网看讲解 不做阐述
import {Text, TextInput, YellowBox, NativeModules, Platform, Permissionsandroid,AsyncStorage} from ‘react-native‘;
import RootViewController from ‘./RootViewController‘
class Root extends React.Component {
componentWillMount() {
}
componentDidMount() {
if (!__DEV__) {
global.console = {
info: () => {},
log: () => {},
warn: () => {},
error: () => {},
};
}
}
render() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<RootViewController/> // 对应tabbar 界面 我有使用到 react-navigation 纯自定义侧边栏 会放在后面讲解
</PersistGate>
</Provider>


)
}
}
export default Root;

ConfigureStore js文件 主要配置 redux的一些插件  thunk,logger,persist
import {createStore,applyMiddleware,compose} from ‘redux‘
import rootReducer from ‘../../reducers/index‘
import { persistStore, persistReducer} from ‘redux-persist‘;
import { AsyncStorage } from ‘react-native‘
import thunk from ‘redux-thunk‘;
import logger from ‘redux-logger‘;
const persistConfig = {
key: ‘root‘,
storage: AsyncStorage,
whitelist: [‘login‘]// 白名单 主要配置持久化缓存
};
const persistReducers = persistReducer(persistConfig, rootReducer); // 包装rootReducer
const applyMiddle= [
thunk,
logger
];
const stores = createStore( persistReducers, compose(applyMiddleware( ...applyMiddle)))
export const store = stores; // 传递给createStore函数 这个export
export const persistor = persistStore(stores); // 包装store 这个也export

这两个文件 redux 就配置完了 简单吧 现在主要是我们使用
流程 ---- 普通界面 发请求---action 处理请求,转到全局的请求,请求完成,数据会转到action---
有两种操作 一种把数据存到全局的 reducers 一种直接return 到 普通界面
首先 我们需要一个普通的界面
import React from ‘react‘;
import {login} form ‘LoginAction‘
import {connect} from ‘react-redux‘;
import {
Text,
View,
} from ‘react-native‘;
class Home extends React.Component {
render(){
return(
<View>
<Text onPress={()=>{this.props.login()}}>登录<Text/>
</View
)
}
}
const mapStateToProps = state => ({
isLogging: state.login.isLogging
});
const mapDispatchToProps = dispatch => ({
login:()=>dispatch(login())
});
export default connect(mapStateToProps, mapDispatchToProps)(Home);

我不做请求 直接缓存到 reducers 数据
LoginAction js
export function login(){
return dispatch=> dispatch({type:TYPES.LOGIN,data:[{‘fdas‘:‘23‘},{‘fdas‘:‘89‘}]})
}

LoginReducers.js

‘use strict‘;
import * as TYPE from ‘../constants/LoginConstants‘;

const initialState = {
isLogging:false,
userInfo:[],
};
export default function Login(state=initialState, action)
{
switch(action.type){
case TYPE.LOGIN:
return{
...state,
isLogging:true,
userInfo:action.data
}
case TYPE.EXIT_LOGIN:
return{
...state,
isLogging:false,
userInfo:[]
}
default:
return state;
}

}
这只是一个简单的操作流程 这篇只讲述了redux简单的配置 和操作 下一篇配置 react-navigation 的自定义侧边栏
以及导航拦截 自定义tabbar



 

以上是关于react-native 0.57.8 配置 最新导航 react-navigation 3.x 以及 redux的主要内容,如果未能解决你的问题,请参考以下文章

react-native 环境配置

React-Native 学习笔记-Android开发平台-开发环境搭建

如何在 react-native 0.57+ 上为 react-relay(经典)配置 babel

react-native 更新到最新版本[关闭]

将 react-native 升级到最新版本 0.61.4 后找不到以下原生模块

对于最新版本的 react-native,应用程序未在 iOS 上运行