ReactNative小项目——（二）

上一篇文章已经做好了一个登陆界面，当然只是界面没有登陆验证啥的，只需点击登陆进入主界面就好了。今天就来整一下主界面。

现在比较流行的猪界面就是底部有几个Tab按钮，点击就可以切换OK 先来实现下这个功能。

登陆界面点击登陆按钮通过navigator跳转到MainPage.js主页面。

主页面：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Home from './Home';
import Picture from './Picture';
import Found from './Found';
import Mine from './Mine';
export default class MainPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'home'
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <TabNavigator>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'home'}
            title="Home"
            renderIcon={() => <Image source={require('../imgs/tab_comprehensive_icon.png')} style={styles.iconStyle}/>}
            renderSelectedIcon={() => <Image source={require('../imgs/tab_comprehensive_pressed_icon.png')} style={styles.iconStyle}/>}
            badgeText="1"
            onPress={() => this.setState({ selectedTab: 'home' })}>
            <Home {...this.props} />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'picture'}
            title="Picture"
            renderIcon={() => <Image source={require('../imgs/tab_move_icon.png')} style={styles.iconStyle}/>}
            renderSelectedIcon={() => <Image source={require('../imgs/tab_move_pressed_icon.png')} style={styles.iconStyle}/>}
            // renderBadge={() => <CustomBadgeView />}
            onPress={() => this.setState({ selectedTab: 'picture' })}>
            <Picture {...this.props} />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'found'}
            title="Found"
            renderIcon={() => <Image source={require('../imgs/tab_found_icon.png')} style={styles.iconStyle}/>}
            renderSelectedIcon={() => <Image source={require('../imgs/tab_found_pressed_icon.png')} style={styles.iconStyle}/>}
            // renderBadge={() => <CustomBadgeView />}
            onPress={() => this.setState({ selectedTab: 'found' })}>
            <Found {...this.props} />
          </TabNavigator.Item>
          <TabNavigator.Item
            selected={this.state.selectedTab === 'mine'}
            title="Mine"
            renderIcon={() => <Image source={require('../imgs/tab_me_icon.png')} style={styles.iconStyle}/>}
            renderSelectedIcon={() => <Image source={require('../imgs/tab_me_pressed_icon.png')} style={styles.iconStyle}/>}
            // renderBadge={() => <CustomBadgeView />}
            onPress={() => this.setState({ selectedTab: 'mine' })}>
            <Mine {...this.props} />
          </TabNavigator.Item>
        </TabNavigator>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginTop: 100,
  },
  iconStyle:{
       width:26,
       height:26,
   },
});
module.exports = MainPage
// AppRegistry.registerComponent('Leisure', () => Leisure);

底部菜单用到了react-native-tab-navigator这个是github上的一个开源项目。可同时支持Android和ios。用法和属性方法点前面的链接过去介绍很详细。英文的自己翻一下就OK。
准备4个切换js页面 Home .js , Picture .js , Found .js , Mine .js。
效果：