ReactNative学习第二天

第二天了,今天学习下UI里最基础的一个控件:TabBar。这里要用到一个第三方库: react-native-tab-navigator。下面我们来写一个例子

 

 一、环境搭建

 这里就不介绍了,ReactNative中文网上有。

 

 二、创建项目

 react-native init TabBarProject --version 0.44.3

 npm install

 react-native run-ios

 

 三、下载 react-native-tab-navigator

 cd 到项目跟目录 执行 npm install react-native-tab-navigator --save

 

 四、修改 index.ios.js

import React, { Component } from 'react';

import {

    AppRegistry,

    StyleSheet,

    Text,

    View

} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

class Home extends Component {

    render() {

        return (

                <View style={styles.container}>

                <Text style={styles.welcome}>

                Home

                </Text>

                </View>

                )

    }

}

class Profile extends Component {

    render() {

        return (

            <View style={styles.container}>

                <Text style={styles.welcome}>

                    Profile

                </Text>

            </View>

            )

    }

}

export default class TabBarProject extends Component {

    state= {

    selectedTab: 'home'

    };

    render() {

        return (

            <TabNavigator style={styles.container}>

                <TabNavigator.Item

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

                    title="Home"

                    selectedTitleStyle={{color: "#3496f0"}}

                    renderIcon={() => <Image style={styles.icon} source={require("./images/home.png")} />}

                    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/home.png")} />}

                    badgeText="1"

                    onPress={() => this.setState({selectedTab: 'home'})}>

                    <Home/>

                </TabNavigator.Item>

                <TabNavigator.Item

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

                    title="Profile"

                    selectedTitleStyle={{color: "#3496f0"}}

                    renderIcon={() => <Image style={styles.icon} source={require("./images/profile.png")} />}

                    renderSelectedIcon={() => <Image style={[styles.icon,{tintColor:'red'}]} source={require("./images/profile.png")} />}

                    onPress={() => this.setState({selectedTab: 'profile'})}>

                    <Profile/>

                </TabNavigator.Item>

            </TabNavigator>

            );

    }

}

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('TabBarProject', () => TabBarProject);

五、用Xcode打开iOS工程,运行