React Native 速成 004 — 页面组件化

通过上面3节内容，我们的 App.js 这个文件相当庞大，因为我们两个 Tab 两个页面都在这一个文件中。下面我们把它们分割开来。

首先再创建一个目录 views，用来放自己的页面显示组件。

在其中新建 HomeView.js 和 SettingView.js。

这里我们需要用到一些 ES2015 的 import 和 export 的基础知识，可以看看这篇
http://es6.ruanyifeng.com/#docs/module

现在我们看看这几个文件：

• App.js *

import React from 'react';
import { Tabs, Tab, Icon } from 'react-native-elements';
import { HomeView } from './views/HomeView'
import { SettingView } from './views/SettingView'

export default class App extends React.Component {

  // 设定tab选择状态
  constructor() {
    super()
    this.state = {
      selectedTab: 'home',
    }
  }

  // changeTab 将改变 this.state.selectedTab
  changeTab (selectedTab) {
    this.setState({selectedTab})
  }

  render() {
    // this.state.selectedTab  赋予 selectedTab，使用更方便
    const { selectedTab } = this.state

    return (
      
         }
          renderSelectedIcon={() => }
          onPress={() => this.changeTab('home')}>
          
        

         }
          renderSelectedIcon={() => }
          onPress={() => this.changeTab('setting')}>
          
        
      

    );
  }
}

• views/HomeView.js *

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Card, ListItem, Button } from 'react-native-elements';

const users = [
 {
    name: 'apple',
    avatar: 'http://iph.href.lu/50x50?text=apple'
 },
 {
    name: 'banana',
    avatar: 'http://iph.href.lu/50x50?text=banana'
 },
 {
    name: 'cat',
    avatar: 'http://iph.href.lu/50x50?text=cat'
 },
 {
    name: 'dog',
    avatar: 'http://iph.href.lu/50x50?text=dog'
 },
]

class HomeView extends React.Component {
  render() {
    return (
      
         Home View 
        
          {
            users.map((u, i) => {
              return (
                

              )
            })
          }
        
        
          
            The idea with React Native Elements is more about component structure than actual design.
          
          
        
      
    )
  }
}

export {HomeView}

• views/SettingView.js *

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Card, ListItem, Button } from 'react-native-elements';

class SettingView extends React.Component {
  render() {
    return (
      
         Setting View 
        
          
            The idea with React Native Elements is more about component structure than actual design.
          
          
        
      
    )
  }
}

export {SettingView}

是不是清爽很多？

目录结构

下一课，我们讲一下边栏菜单和导航。

icons 可以参见 https://github.com/oblador/react-native-vector-icons