如果感覺我寫的不錯(cuò)，關(guān)注我，給個(gè)star哦！項(xiàng)目地址

如果遇到什么問題可以在評(píng)論區(qū)回復(fù)，或者加QQ群397885169討論

前言

一直想用RN寫一個(gè)功能相對(duì)全面的代碼，經(jīng)過一周的尋找，最終還是決定寫《百思不得姐》，原因很多，我認(rèn)為最重要的一點(diǎn)就是網(wǎng)上有接口。
我不知道能將這個(gè)APP完成多少，但我會(huì)盡可能的完善里面的功能。

開始

創(chuàng)建工程：

創(chuàng)建RN項(xiàng)目要執(zhí)行：react-native init BaiSi BaiSi就是我這個(gè)項(xiàng)目的名稱。

創(chuàng)建目錄：

目錄結(jié)構(gòu).png

1. index.ios.js和index.android.js 這兩個(gè)本來應(yīng)該是程序入口，但為了讓代碼跨平臺(tái)，所以我們?cè)赼pp目錄下創(chuàng)建了app.js，用它來表示項(xiàng)目的跟入口，為了以后使用Redux做準(zhǔn)備。
2. base 文件夾里面放的是程序中只創(chuàng)建使用一次的東西，比如說底部的TabBar和Navigator。
3. common 文件夾里面放著公共的方法，比如說網(wǎng)絡(luò)請(qǐng)求，json數(shù)據(jù)。
4. component 文件夾里面放著項(xiàng)目中要經(jīng)常用到的組件，比如收返回按鈕。
5. pages 文件夾里面放著項(xiàng)目中的頁面和頁面中要用到的組件。
   暫時(shí)我只想到這么多文件，以后可能會(huì)添加Redux目錄結(jié)構(gòu)需要的文件夾。

導(dǎo)入組件

俗話說：前人種樹后人乘涼。在github上有很多大神開源了很多可以快速搭建項(xiàng)目的組件，在這個(gè)項(xiàng)目中推薦幾個(gè)。當(dāng)然，開始創(chuàng)建項(xiàng)目的時(shí)候，很多開源組件是用不到的，用到的時(shí)候會(huì)在之后文章中說明。
react-native-tab-navigator創(chuàng)建類似iOS底部TabBarController的組件，簡(jiǎn)單，粗暴。

react-native-vector-icons圖標(biāo)組件，在RN開發(fā)中會(huì)發(fā)現(xiàn)，如果調(diào)用項(xiàng)目中的圖標(biāo)會(huì)有一個(gè)延遲，這個(gè)是RN異步加載的問題。所以，就到了這個(gè)庫大顯神威的時(shí)候啦。

react-native-navbar導(dǎo)航條組件，這個(gè)庫封裝了類似iOS頂部導(dǎo)航條的UI，API簡(jiǎn)單，頁面也和原生很像。

搭建頁面結(jié)構(gòu)

基本每個(gè)APP都需要一個(gè)頁面結(jié)構(gòu)，比如說只有導(dǎo)航，沒有TabBar，只有TabBar，沒有導(dǎo)航，當(dāng)然我們是一個(gè)完整的項(xiàng)目，這兩者都要有，您說是吧。

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);

上面也說了，雖然這個(gè)是之前的入口，但為了跨平臺(tái)，只能忍痛割愛啦！

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 />
        );
    }
};

這個(gè)才是我們真正的入口！以后可能要使用Redux，所以這個(gè)頁面也是很空曠滴！

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>
        );
    }
};

這個(gè)里面放著項(xiàng)目中最重要的東西，頁面之后的跳轉(zhuǎn)和傳值全靠它了。

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的東西。

運(yùn)行結(jié)果.png

總結(jié)

今天的內(nèi)容有點(diǎn)少，因?yàn)楣沮s雙十二啊??????
等我忙過這段時(shí)間，會(huì)盡快將這個(gè)項(xiàng)目做完滴！
如果在使用中遇到什么問題，歡迎私信和評(píng)論哦！
如果喜歡我的文章，關(guān)注我，給個(gè)star哦！