可能是React Native比较好用的框架?

栏目: 服务器 · 发布时间: 5年前

内容简介:最近公司开始重写我们历史悠久的iOS应用。由于iOS和安卓都是N手项目,所以重写。前端技术选择了React Native。虽然我之前用React Native开发过,但是是和原生混编。对于搭建一个React Native并不是特别熟悉。经过几天的摸索自认为弄出来个还算不太差的框架,分享出来大家一起学习。只说实战,没有原理分析。这是代码地址我个人认为这个应该是React Native开发的标配了。从我个人开发来看,在写页面的时候经常忘记引用组件,这个时候并不会有提示,当你运行了项目模拟器才会告诉你错误,必须

最近公司开始重写我们历史悠久的iOS应用。由于iOS和安卓都是N手项目,所以重写。前端技术选择了React Native。虽然我之前用React Native开发过,但是是和原生混编。对于搭建一个React Native并不是特别熟悉。经过几天的摸索自认为弄出来个还算不太差的框架,分享出来大家一起学习。只说实战,没有原理分析。这是代码地址 DLReactNativeArchitecture 没有Demo的都是流氓。

内容结构

  • JavaScript代码检测
    • ESlint在VS Code下的配置
  • 页面管理
    • 底部导航
    • 页面导航
    • 切换导航
  • 数据管理
    • 全局数据管理
    • 网络请求错误管理

JavaScript代码检测

我个人认为这个应该是React Native开发的标配了。从我个人开发来看,在写页面的时候经常忘记引用组件,这个时候并不会有提示,当你运行了项目模拟器才会告诉你错误,必须回去修改代码,再次运行,降低了开发效率。在代码编写的时候就提示书写错误显得非常重要。

ESlint在VS Code下的配置

可能是React Native比较好用的框架?
npm i eslint-config-rallycoding babel-eslint --save-dev
.eslintrc
{
    "extends": "eslint-config-rallycoding",
    "parser": "babel-eslint",
    "rules": {
        "semi": 0    
    }
}
复制代码

页面管理

用React Native开发,如果想实现像iOS原生 UITabBarControllerUINavigationController 对页面的导航管理,只能用 TabBarIOSNavigatorIOS ,但是这两个组件都不支持Android(天杀的安卓)。官网推荐了使用 react-native-navigationreact-navigation ,我在自己的项目中选择了 react-navigation ,因为:sparkles:更多。(写着写着发现 react-navigation 3.0出来了)

底部导航

可能是React Native比较好用的框架?
// 在routes文件中
import {
    createBottomTabNavigator,
    createAppContainer
} from 'react-navigation'

import HomePage from '../pages/Home'
import MessagePage from '../pages/Message'
import ProfilePage from '../pages/Profile'

import styles from '../styles'

function _renderTabbarIcon(icon) {
	return <Image source={icon} style={styles.tabBarIcon} />
}

const tabarIcons = {
    Home: {
        render: focused => {
            return focused
                ? _renderTabbarIcon(require('../images/tabbar_home_selected.png'))
                : _renderTabbarIcon(require('../images/tabbar_home.png'))
        }
    }
}

const tabBarStack = createBottomTabNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            tabBarLabel: '首页'
        }   
    },
    Message: {
        screen: MessagePage,
        navigationOptions: {
            tabBarLabel: '信息'
        }
    },
    Profile: {
        screen: ProfilePage,
        navigationOptions: {
            tabBarLabel: '我的'
        }
    }
}, {
    defaultNavigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused }) => {
            const { routeName } = navigation.state
            return tabarIcons[routeName].render(focused)
        }
    }),
    tabBarOptions: {
        activeTintColor: '#6699ff',
        inactiveTintColor: '#333'
    }
})

export default createAppContainer(tabBarStack)

// 在App.js文件中
import TabbarStack from './src/routes'

export default class App extends Component {
    render() {
        return <TabbarStack />
    }
}
复制代码

页面导航

可能是React Native比较好用的框架?
可能是React Native比较好用的框架?
第一张图是从Home页面跳转到Home Detail页面不隐藏Tabbar,第二张则是隐藏Tabbar。在代码中我会使用 ~注意~

来提示。写注意的地方都大家可以多注意一下^^,不太通顺!

// 在routes文件中
const HomeStack = createStackNavigator({
    Home: {
       screen: HomePage,
       navigationOptions: {
           title: '首页'
       }
    },
    HomeDetail: {
       screen: HomeDetailPage,
       navigationOptions: {
           title: '详情'
       } 
    }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: "#fff",
            borderBottomWidth: 0
        },
        headerTintColor: "#333",
        headerBackTitle: null         // ~注意~ 这个地方是隐藏返回按钮文字的
    }
})

HomeStack.navigationOptions = ({ navigation }) => {  // ~注意~ 如果想实现隐藏Tabbar的功能要调用这个方法
    let tabBarVisible = true
    if (navigation.state.index > 0) {
        tabBarVisible = false
    }
    return {
        tabBarVisible
    }
}
const TabBarStack = createBottomTabNavigator({
    Home: {
        screen: HomeStack,
        navigationOptions: {
            tabBarLabel: '首页'
        }   
    }
})
复制代码

切换导航

这个主要是用于APP广告页面到Tabbar导航的跳转,或者是登录页面到Tabbar导航的跳转。

可能是React Native比较好用的框架?
// 在routes文件中
const switchStack = createSwitchNavigator({
    Launch: {
        screen: LaunchPage,
        navigationOptions: {
            header: null
        }
    },
    Tabbar: {
        screen: TabBarStack
    }
}, {
    initialRouteName: 'Launch'
})

export default createAppContainer(switchStack)
复制代码

数据管理

在数据管理中我使用了 react-redux , axios , redux-axios-middleware 以及 react-native-dropdownalert 。因为涉及的文件较多,不一一列举。其中我想说几点,一个用户private_token的添加,还有就是用axios进行网络请求的时候GET和POST添加参数的区别。

全局数据管理

可能是React Native比较好用的框架?
// 在store/reducers/message.js文件
export default function reducer(state = initialState, action) {
    switch (action.type) {
        case FETCH_MESSAGE_LIST: 
            return {
                ...state,
                loading: true,
                list: [],
            }
        case FETCH_MESSAGE_LIST_SUCCESS:
            return {
                ...state,
                loading: false,
                list: action.payload.data.items
            }
        case FETCH_MESSAGE_LIST_FAIL:
            return {
                ...state,
                loading: false,
                error: action.error.message
            }
        case REMOVE_MESSAGE_WITH_ID: {
            const { itemId } = action.payload
            return {
                ...state,
                list: state.list.filter(l => l.id !== itemId)
            }
        }
        default: 
            return state
    }
}
复制代码

全局错误管理

在这个配置中要注意的就是, user_token 的添加。因为AsyncStorage.getItem是异步方法,所以success也要变成异步方法。

// App.js文件中
const middlewareConfig = {
    interceptors: {
        request: [
            {
                success: async function (_, req) {
                    // const token = await AsyncStorage.getItem('user_token')
                    const newReq = {
                        ...req,
                        headers: {
                            ...req.headers,
                            common: {
                                ...req.headers.common,
                                // Authorization: token
                            },
                        }
                    }
                    return newReq
                }
            }
        ],
        response: [
            {
                success: function (_, res) {
                    return res
                },
                error: function (_, error) {
                    DropDownHolder.getDropDown().alertWithType('error', 'Error', error.message)
                    return Promise.reject(error)
                }
            }
        ]
    }
}
复制代码

最后

更多详细的代码大家可以看源码 DLReactNativeArchitecture 。不知道这个对大家有没有帮助,本人水平有限。写文章条理也不是太清晰,还有些名字写得也不是特别合适。如果大家对代码,对文章有什么问题,建议可以在评论留言。大家一起学习,一起进步。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

C++编程思想(第1卷)

C++编程思想(第1卷)

[美] Bruce Eckel / 刘宗田、袁兆山、潘秋菱 / 机械工业出版社 / 2002-9 / 59.00元

《C++编程思考》第2版与第1版相比,在章节安排上有以下改变。增加了两章:“对象的创建与使用”和“C++中的C”,前者与“对象导言”实际上是第1版“对象的演化”一章的彻底重写,增加了近几年面向对象方法和编程方法的最瓣研究与实践的有效成果,后者的添加使不熟悉C的读者可以直接使用这本书。删去了四章:“输入输出流介绍”、“多重继承”、“异常处理”和“运行时类型识别”,删去的内容属于C++中较复杂的主题,......一起来看看 《C++编程思想(第1卷)》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具