RN项目第一节

一、项目说明

本项目为模仿美团的项目,采用的是网上提供的API接口。导航采用 公司推荐的react-navigation,滚动条采用第三方组件react-native-scroll-tab-view。RN环境为0.50。

(先声明!!是在网上某位大神的博客上学习哒。自己做了改进!) 原github地址:https://github.com/huanxsd/MeiTuan

样式图如下:

二、项目管理

采用WebStorm的git功能来管理项目 1)在WebStorm中,选中菜单栏中的VCS,点击Enable Version Control Integration选项。

2)在弹出的弹窗中选择Git

3)接着会看见WebStrom底部弹出Version Control一栏,并且所有未加入到git的文件都已标红。此时,右击Unversion,选择Add to VCS,将文件添加到VCS中。

4)在WebStrom的右上角做提交和下载的操作

三、框架搭建

1)添加必要依赖 在命令行输入以下代码

yarn add react-navigation
yarn add react-native-scrollable-tab-view

当然,以上代码可以用npm代替 打开package.json文件,会发现这两个组件已经添加到项目当中。

2)添加项目需要的图片并建立分类建立文件夹和初始文件。

建立src文件夹

  • 复制图片文件夹
  • 建立scene文件夹,用于创建各类页面的文件夹及页面
  • 建立widget文件夹,用于封装一下小的组件,比如说文字、颜色、标签栏等信息
  • 建立common文件夹,用来处理各个文件共同的样式、请求数据等功能
  • 建立初始文件RootScene
  • 建立api文件,这里存储的是需要请求数据的接口。直接提供出来。

按照上述思维导图,将文件夹和文件建立好。并将新建的文件添加到VCS中

3)设置各个主页面也就是HomeScene、MineScene、NearbyScene、OrderScene的初始状态。以HomeScene为例,粘贴一段代码。其他页面以此类推

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


export default class HomeScene extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to HomeScene!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'green',
    }
});
  1. 将初始页面App.js指向RootScene
import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View
} from 'react-native';
import RootScene from './src/RootScene'
export default class App extends Component {
  render() {
    return (
        <RootScene />
    );
  }
}

5)在RootScene页面中搭建导航,实现Tab标签栏框架

  • 引入实现导航的组件

要想让react-naviation组件发挥作用必定要引入它的子组件。StackNavigator组件用于设置导航,而TabNavigator则是用作设置标签栏,TabBarBottom用于设置标签栏的位置。

import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
  • 封装标签栏的item组件。

在widget文件夹中建立一个TabBarItem.js文件,这个小组件是为了对标签栏要显示的图做一些处理。

import React, {Component } from 'react'
import { Image } from 'react-native'
export default class TabBarItem extends Component {
    render(){
        // 设置当item选中时要展示的图片,如果图片库中有被选中的图片,则用选中的图片,否则可以把普通图片赋值给它
        let selectedImage = this.props.selectedImage?this.props.selectedImage:this.props.normalImage
        return (
            <Image
                source={this.props.focused? selectedImage:this.props.normalImage}
                style={{tintColor:this.props.tintColor,width:25,height:25}}
            />
        )
    }
}
  • 建立color组件

上文中提到,为了方便,项目中会创建出一些微小的组件。在widget中建立color.js文件。color是为了给项目设置主题颜色,边框颜色和背景颜色的

export default {
    theme: '#06C1AE',
    border: '#e0e0e0',
    background: '#f3f3f3'
}
  • 引入需要的文件

在RootScene文件中,引入四个主界面和封装好的TabBarItem组件以及React框架必须的组件

import React, { Component } from 'react'
import HomeScene from './scene/Home/HomeScene'
import OrderScene from './scene/Order/OrderScene'
import NearbyScene from './scene/Nearby/NearbyScene'
import MineScene from './scene/Mine/MineScene'
  • 创建标签栏

在react-navigation这个组件中,标签栏是由TabNavigator组件创建的,将要加入到标签栏中的页面添加并设置标题、样式、图标等属性即可。这里只以Home为例。其他参考源码。

//创建标签栏
const Tab = TabNavigator(
    {
        //设置标签栏四个页面
        Home: {
            screen: HomeScene,
            navigationOptions: ({ navigation }) => ({
                tabBarLabel: '团购',
                //设置标签栏的图标,需要给每一项都设置
                tabBarIcon: ({ focused, tintColor }) => (
                    //自定义封装的Item
                    <TabBarItem
                        tintColor={tintColor}
                        focused={focused}
                        normalImage={require('./img/tabbar/pfb_tabbar_homepage.png')}
                        selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected.png')}
                    />
                )
            }),
        },
          
    }

);

当然,在最后也要设置标签栏的通用属性,比如说整个标签栏的位置,是否懒加载,是否有动画,样式等。

 {
        tabBarComponent: TabBarBottom,   
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        animationEnabled: true,
        lazy: true,
        tabBarOptions: {
            activeTintColor: color.theme,
            inactiveTintColor: '#979797',
            style: { backgroundColor: '#ffffff' },
        },
  • 创建导航

导航和标签栏的创建方法相似,在StackNavigator里面加入要显示的页面即可。因为四个主页面都添加在Tab标签栏当中,所以只要将Tab加入到导航作为显示页面。

const Navigator = StackNavigator(
    {
        Tab: { screen: Tab },  //框架的页面
    },

    //设置用于适配StackNavigator的属性
    {
        navigationOptions: {
            headerBackTitle: null,
            headerTintColor: '#333333',
            showIcon: true,
        },
    }
);
  • 在render方法中返回导航
export default class RootScene extends Component {
    render() {
        return(
            <Navigator/>
        )

    }
}

效果图如下:

四、状态栏的设置 从原型图上可以看出,只有当页面跳转在’首页‘和’我的‘两个页面时,状态栏的样式是亮色,其余时候都呈现了黑色。

  • 要设置状态栏必须先导入StateBar组件
import { StatusBar } from 'react-native'
  • 构造函数中,先将所有页面状态栏的状态都设置为亮色。
constructor() {
        super()
        StatusBar.setBarStyle('light-content')
    }
  • 定义一个常量,设置’首页‘和’我的‘两个页面为亮色
// 设置home和mine为的状态栏为亮色
const lightContentScenes = ['Home', 'Mine']

那么要如何确定界面展示的就是这两个页面的信息呢?这里就不得不用到路由。

  • 设定一个方法,用于获取每个界面的路由。如何通过路由来设置页面状态栏的状态。
//得到路由的名称
function getCurrentRouteName(navigationState) {
    if (!navigationState) {
        return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
        return getCurrentRouteName(route);
    }
    return route.routeName;
}

导航Navigator中有一个方法叫onNavigationStateChange,常用来追踪screen的变化。组件会给该方法传入目前的界面场景与先前的场景。

  • 用变量接受当前场景和上一个场景的路由,如果上一个场景不是当前场景,就是更换过一个场景。并且当前场景在亮色状态的数组中,就改为白色,否则改为黑色。
<Navigator
                //用onNavigationStateChange来追踪screen的变化
                onNavigationStateChange={
                    //可以传props也可以不传
                     // 传入两个参数 目前的场景和前一个场景
                    (prevState, currentState) => {
                        const currentScene = getCurrentRouteName(currentState);
                        const previousScene = getCurrentRouteName(prevState);
                        //若两个场景不相等
                        if (previousScene !== currentScene) {
                            //并且目前的场景包含在数组里面
                            if (lightContentScenes.indexOf(currentScene) >= 0) {
                                // 设置为白色
                                StatusBar.setBarStyle('light-content')
                            } else {
                                // 否则设置为暗色
                                StatusBar.setBarStyle('dark-content')
                            }
                        }
                    }
                }
            />

效果图如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏上善若水

010HTML页面加载和解析流程详细介绍

2265
来自专栏DeveWork

WordPress自带TinyMCE编辑器相关功能增强

WordPress 默认的那个编辑器叫做TinyMCE。TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Fi...

3535
来自专栏Android小菜鸡

解决H5在IOS的WebView下上拉下拉会带动整个WebView出现空白

做Web应用,碰到问题,当拖动页面的时候,IOS的整个WebView会被拖动,导致上下方有灰色空白出现,并且影响内部滑动的体验。 在网上找了个神秘代码,大概意...

1K4
来自专栏互联网杂技

Chrome 35个开发者工具的小技巧【动态图演示】

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟...

2994
来自专栏美丽应用

PPIICC:简洁易用的长截图工具

1272
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(二)

2.2 选中MasterViewController.xib 选中view,然后把它拖动的更宽更高,不必在意具体的尺寸细节,要能够放下新的控件就可以。

1312
来自专栏React Native开发圈

React Native 图片查看组件

npm i react-native-image-zoom-viewer--save

1282
来自专栏张戈的专栏

解决WordPress4.4.1不支持图片暗箱问题,Begin主题适用

前几天更新 WordPress 最新 4.41 版本之后,发现文章之前的图片暗箱弹出功能没了,而且之前设置好是缩略图尺寸也没了,直接就是最大尺寸。 看了下当前页...

3354
来自专栏JackeyGao的博客

在网页中显示ansi终端颜色

终端命令为了可以友好的显示大多数都支持了颜色显示。 在终端中良好的颜色显示, 能够让我们处理问题更加高效,但是在运维开发中, 难免要在 web 网页中操作服务器...

2732
来自专栏守望轩

Visual Studio 2008 每日提示(六)

#051、循环使用剪贴薄里粘贴的不同内容 原文地址:http://blogs.msdn.com/saraford/archive/2007/10/01/did...

34610

扫码关注云+社区

领取腾讯云代金券