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

Posted 2021-02-14 rnxb

以下是我的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