ReactiveNative开发历程

2019/5/28 posted in  跨平台开发

搭建环境

安装环境必备软件

官方推荐使用Homebrew来安装node和Watchman

brew install node
brew install watchman

设置npm镜像来加速后面的过程

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。

创建新项目

使用 React Native 命令行工具来创建一个为"AwesomeProject"的新项目:

react-native init AwesomeProject

运行项目

cd AwesomeProject
react-native run-android

开发NovelProject

使用第三方库

React-navigation

导入依赖库

在项目Terminal中输入命令行:

yarn add react-navigation

然后在package.json文件中就可以看到,依赖库已经导入完毕:

"react-native-tab-navigator": "^0.3.4",

注意适配IOS要导入react-native-gesture-handler库,并进行关联

yarn add react-native-gesture-handler
react-native link
配置Navigator

在项目的入口中直接配置StackNavigator,StackNavigator中注册所有需要跳转的界面,在这个项目中还有注册登录功能,在效果图中没有展示,这里不作探讨。首先是入口文件:

import React from 'react';
import {StackNavigator} from 'react-navigation';
import {TabNav} from "./RootPage";
import LoginPage from "./page/Login/loginPage";
import RegPage from "./page/Login/regPage";
import {FindAccountPage} from "./page/Login/findAccountPage"; // 路由导航

const App = StackNavigator({
        Login: {screen: LoginPage}, // 登录页
        Reg: {screen: RegPage}, // 注册页
        FindAccount: {screen: FindAccountPage}, // 找回密码页
        Main: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
                header: null
            })
        }
    },
    {
        initialRouteName: 'Login',
        headerMode: 'screen'
    });

export default App;

上面可以注意到TabNav,也就是TabNavigator,是作为一个screen参数的值传入到StackNavigator中,在上面提到的navigationOptions的配置中,我们将header设置为null,也就是不要标题栏。

接着进入到配置TabNavigator的RootPage中:

import React from 'react';
import {TabNavigator} from 'react-navigation';

import HomePage from './page/Home/HomePage';
import FriendPage from './page/Friend/FriendPage';
import TaskPage from './page/Task/TaskPage';
import MinePage from './page/Mine/MinePage';
import DealPage from './page/Deal/DealPage';

export const TabNav = TabNavigator(
    {
        Home: {
            screen: HomePage,
        },
        Task: {
            screen: TaskPage,
        },
        Friend: {
            screen: FriendPage,
        },
        Deal: {
            screen: DealPage,
        },
        Mine: {
            screen: MinePage,
        }
    },
    {
        tabBarOptions: {
            //当前选中的tab bar的文本颜色和图标颜色
            activeTintColor: '#4BC1D2',
            //当前未选中的tab bar的文本颜色和图标颜色
            inactiveTintColor: '#000',
            //是否显示tab bar的图标,默认是false
            showIcon: true,
            //showLabel - 是否显示tab bar的文本,默认是true
            showLabel: true,
            //是否将文本转换为大小,默认是true
            upperCaseLabel: false,
            //material design中的波纹颜色(仅支持Android >= 5.0)
            pressColor: '#788493',
            //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
            pressOpacity: 0.8,
            //tab bar的样式
            style: {
                backgroundColor: '#fff',
                paddingBottom: 1,
                borderTopWidth: 0.2,
                paddingTop:1,
                borderTopColor: '#ccc',
            },
            //tab bar的文本样式
            labelStyle: {
                fontSize: 11,
                margin: 1
            },
            //tab 页指示符的样式 (tab页下面的一条线).
            indicatorStyle: {height: 0},
        },
        //tab bar的位置, 可选值: 'top' or 'bottom'
        tabBarPosition: 'bottom',
        //是否允许滑动切换tab页
        swipeEnabled: true,
        //是否在切换tab页时使用动画
        animationEnabled: false,
        //是否懒加载
        lazy: true,
        //返回按钮是否会导致tab切换到初始tab页? 如果是,则设置为initialRoute,否则为none。 缺省为initialRoute。
        backBehavior: 'none',
    });

在这里我们可以看到,我们将底部导航的属性基本都用上了,这是为了方便大家在使用时作适合自己的选择,毕竟需求不一样,不过这个效果是可以接受的了~

在这个界面中导入了其他五个子界面,每个子界面效果可以设置成差不多,例如下面这样:

import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native';

export default class FriendPage extends Component {
    static navigationOptions = {
        tabBarLabel: '好友',
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('../../img/fri_sel.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('../../img/fri_nor.png')}/>
            );
        },
    };

    render() {
        return (
            <View style={styles.container}>
                <Text>这是好友</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBarIcon: {
        width: 21,
        height: 21,
    }
});

在子界面中可以设置icon图标样式,表示在点击前后颜色的改变,效果如下:


当然,我们也可以设置标题栏,只需要在下面代码中添加headerTitle属性:

export default class FriendPage extends Component {
    static navigationOptions = {
        tabBarLabel: '好友',
        headerTitle: '好友',
        tabBarIcon: ({focused}) => { ...

别忘了,在StackNavigator配置TabNavigator时不要设置header为null即可。

Main: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
             // header: null
            })
        }