从0到1利用React-Native构建百思不得姐(一)

96
挂着铃铛的兔
2016.12.05 17:41* 字数 878

如果感觉我写的不错,关注我,给个star哦!项目地址

如果遇到什么问题可以在评论区回复,或者加QQ群397885169讨论

前言

一直想用RN写一个功能相对全面的代码,经过一周的寻找,最终还是决定写《百思不得姐》,原因很多,我认为最重要的一点就是网上有接口。
我不知道能将这个APP完成多少,但我会尽可能的完善里面的功能。

开始

创建工程:

创建RN项目要执行:react-native init BaiSi BaiSi就是我这个项目的名称。

创建目录:

目录结构.png
  1. index.ios.jsindex.android.js 这两个本来应该是程序入口,但为了让代码跨平台,所以我们在app目录下创建了app.js,用它来表示项目的跟入口,为了以后使用Redux做准备。
  2. base 文件夹里面放的是程序中只创建使用一次的东西,比如说底部的TabBar和Navigator。
  3. common 文件夹里面放着公共的方法,比如说网络请求,json数据。
  4. component 文件夹里面放着项目中要经常用到的组件,比如收返回按钮。
  5. pages 文件夹里面放着项目中的页面和页面中要用到的组件。
    暂时我只想到这么多文件,以后可能会添加Redux目录结构需要的文件夹。

导入组件

俗话说:前人种树后人乘凉。在github上有很多大神开源了很多可以快速搭建项目的组件,在这个项目中推荐几个。当然,开始创建项目的时候,很多开源组件是用不到的,用到的时候会在之后文章中说明。
react-native-tab-navigator创建类似iOS底部TabBarController的组件,简单,粗暴。

react-native-vector-icons图标组件,在RN开发中会发现,如果调用项目中的图标会有一个延迟,这个是RN异步加载的问题。所以,就到了这个库大显神威的时候啦。

react-native-navbar导航条组件,这个库封装了类似iOS顶部导航条的UI,API简单,页面也和原生很像。

搭建页面结构

基本每个APP都需要一个页面结构,比如说只有导航,没有TabBar,只有TabBar,没有导航,当然我们是一个完整的项目,这两者都要有,您说是吧。

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';

import App from './app/app';

export default class BaiSi extends Component {
  render() {
    return (
      <App />
    );
  }
}

AppRegistry.registerComponent('BaiSi', () => BaiSi);

上面也说了,虽然这个是之前的入口,但为了跨平台,只能忍痛割爱啦!

app.js

import React, { Component } from 'react';
import {
    Navigator,
} from 'react-native';

import Root from '../app/base/root';

export default class app extends Component {
    render() {
        return (
            <Root />
        );
    }
};

这个才是我们真正的入口!以后可能要使用Redux,所以这个页面也是很空旷滴!

root.js

import React, { Component } from 'react';
import {
    Navigator,
    View
} from 'react-native';

import TabBar from './tabBar';

export default class root extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Navigator
                    initialRoute={{ name: 'TabBar', component: TabBar }}
                    style={{height:64}}
                    configureScene={(route) => {
                        if (route.sceneConfig) {
                            return route.sceneConfig;
                        }
                        return Navigator.SceneConfigs.PushFromRight;
                    } }
                    renderScene={(route, navigator) => {
                        let Component = route.component;
                        return (
                            <Component navigator = {navigator} route = {route} {...route.passProps} />
                        )
                    } }
                />
            </View>
        );
    }
};

这个里面放着项目中最重要的东西,页面之后的跳转和传值全靠它了。

tabBar.js

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

import TabNavigator from 'react-native-tab-navigator';
import Icon from 'react-native-vector-icons/Ionicons';

import Home from '../pages/home/homeContainer';
import Main from '../pages/main/mainContainer';
import Middle from '../pages/middle/middleContainer';

const tabBarItems = [
    { title: '精华', icon: () =>  <Icon name="ios-home" size={30} color='#333' style={{marginTop:20}}/>,
        selectedIcon: () => <Icon name="ios-home" size={30} color='#d81e06' style={{marginTop:20}}/>
        ,component: Home },
    { title: null, icon: () => <Icon name="md-add-circle" size={48} color='#d81e06' />,
        selectedIcon: () => <Icon name="md-add-circle" size={48} color='#d81e06' />,
        component: Middle },
    { title: '我的', icon: () => <Icon name="md-contact" size={30} color='#333' style={{marginTop:20}}/>,
        selectedIcon: () => <Icon name="md-contact" size={30} color='#d81e06' style={{marginTop:20}}/>,
        component: Main },
];

export default class tabBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: tabBarItems[0].title,
        };
    }
    render(){
        return(
            <TabNavigator tabBarStyle={{height:49}}>
                {
                    tabBarItems.map((controller,i) => {
                        let Component = controller.component;
                        return(
                            <TabNavigator.Item
                                key={i}
                                selected = {this.state.selectedTab === controller.title}
                                title = {controller.title}
                                renderIcon = {controller.icon}
                                renderSelectedIcon = {controller.selectedIcon}
                                onPress={() => this.setState({selectedTab:controller.title})}
                                titleStyle={{color:'#333',fontSize:12}}
                                selectedTitleStyle={{color:'rgb(251,33,33)'}}
                                allowFontScaling={true}
                            >
                                <Component navigator = {this.props.navigator} {...this.props} />
                            </TabNavigator.Item>
                        )
                    })
                }
            </TabNavigator>
        )
    }
}

这里面放着底部TabBar的东西。

运行结果.png

总结

今天的内容有点少,因为公司赶双十二啊😂😂😂
等我忙过这段时间,会尽快将这个项目做完滴!
如果在使用中遇到什么问题,欢迎私信和评论哦!
如果喜欢我的文章,关注我,给个star哦!

React-Native