ReactNative学习第六天 项目底部TabBar和Icon自定义库

昨天我们学了 项目Header+顶部滑动切换

今天刚开始的时候看到了一个库:react-native-vector-icons自定义矢量图。我研究了一上午,但整体流程还跑不通,无奈先暂时放着,等以后再研究。这个库能适配不同机型,确实挺方便的。有兴趣的同学可以研究下。

http://www.jianshu.com/p/9016703cfe49

关于昨天提到的 react-native-scrollable-tab-view无法显示内容问题,决定先把这个类屏蔽掉,到时候看下源码再找问题所在。

今天,我主要完成一件事,底部TabBar切换,虽然我以前一篇博客,介绍的就是底部TabBar切换,但我今天找到了一个更方便的控件:TabBarIOS和NavigatorIOS。

用法挺简单的,导入2张Icon图,修改home.js代码

'use strict';

import React, {Component} from 'react';

import {

    AppRegistry,

    StyleSheet,

    TouchableOpacity,

    Navigator,

    Text,

    View

} from 'react-native';

import Header from './Header';

import HomeContent from './HomeContent';

class HomeNext extends Component {

    render() {

        return (

            <View style={styles.container}>

                <Text style={styles.welcome}>

                第二个页面

                </Text>

            </View>

            )

    }

}

export default class Home extends Component {

    clickToNext(){

        this.props.navigator.push({

        title:'详情',

        component:HomeNext

        })

    }

    

    render() {

        return (

            <View style={styles.container}>

                <TouchableOpacity

                activeOpacity={0.5}

                onPress={this.clickToNext.bind(this)}>

                    <Text style={styles.welcome}>

                    home</Text>

                </TouchableOpacity>

            </View>

            );

    }

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center',

        backgroundColor: '#F5FCFF',

    },

    welcome: {

        fontSize: 20,

        textAlign: 'center',

        margin: 10,

    },

    instructions: {

        textAlign: 'center',

        color: '#333333',

        marginBottom: 5,

    },

    icon: {

        width: 20,

        height: 20

    }

});

在index.ios.js里进行调用

import React, { Component } from 'react';

import {

    AppRegistry,

    StyleSheet,

    TabBarIOS,

    NavigatorIOS,

    Text,

    View

} from 'react-native';

import Home from './home/Home'

class MyInfo extends Component {

    render() {

        return (

            <View style={styles.container}>

                <Text style={styles.welcome}>

                    我的

                </Text>

            </View>

            )

    }

}

export default class NewsProject extends Component {

    state= {

    selectedTab: 'home'

    };

    render() {

        return (

            <TabBarIOS

                barTintColor='#f9f9f9' //背景色

                translucent={true}   //半透明

                tintColor='red'      //前景色

            >

                <TabBarIOS.Item

                    renderAsOriginal

                    title="首页"  //标题

                    icon={require('./images/home.png')}//图标

                    selectedIcon={require('./images/home.png')}//选中图标

                    selected = {this.state.selectedTab == 'home'}

                    onPress = {()=>{this.setState({selectedTab:'home'});}}//点击事件

                >

                        <NavigatorIOS

                            style={{flex: 1}}

                            initialRoute={{

                            component: Home,    //设置根视图

                            title:'首页' }}

                        />

                </TabBarIOS.Item>

                

                <TabBarIOS.Item

                    renderAsOriginal

                    title="我的"  //标题

                    icon={require('./images/myinfo.png')}  //图标

                    selectedIcon={require('./images/myinfo.png')} //选中图标

                    selected = {this.state.selectedTab == 'myInfo'}

                    onPress = {()=>{this.setState({selectedTab:'myInfo'});}}//点击事件

                >

                        <NavigatorIOS

                            style={{flex: 1}}

                            initialRoute={{

                            component: MyInfo,    //设置根视图

                            title:'我的' }}

                        />

                </TabBarIOS.Item>

            </TabBarIOS>

        );

    }

}

const styles = StyleSheet.create({

    container: {

        flex: 1,

        justifyContent: 'center',

        alignItems: 'center',

        backgroundColor: '#F5FCFF',

    },

    welcome: {

        fontSize: 20,

        textAlign: 'center',

        margin: 10,

    },

    instructions: {

        textAlign: 'center',

        color: '#333333',

        marginBottom: 5,

    },

    icon: {

        width: 20,

        height: 20

    }

});

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

运行看看

我运行时候遇到一个错误 “React Native, NavigatorIOS, undefined is not an object (evaluating ‘this.props.navigator.push’)”

可以看看https://stackoverflow.com/questions/31304017/react-native-navigatorios-undefined-is-not-an-object-evaluating-this-props-n