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 (
      <Tabs>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={selectedTab === 'home'}
          title={selectedTab === 'home' ? 'HOME' : null}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
          onPress={() => this.changeTab('home')}>
          <HomeView />
        </Tab>

        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={selectedTab === 'setting'}
          title={selectedTab === 'setting' ? 'SETTING' : null}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
          onPress={() => this.changeTab('setting')}>
          <SettingView />
        </Tab>
      </Tabs>

    );
  }
}

• 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 (
      <ScrollView>
        <Text> Home View </Text>
        <Card containerStyle={{padding: 0}} >
          {
            users.map((u, i) => {
              return (
                <ListItem
                  key={i}
                  roundAvatar
                  title={u.name}
                  avatar={{uri:u.avatar}} />

              )
            })
          }
        </Card>
        <Card
          title='HELLO WORLD'
          image={{uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'}}>
          <Text style={{marginBottom: 10}}>
            The idea with React Native Elements is more about component structure than actual design.
          </Text>
          <Button
            icon={{name: 'code'}}
            backgroundColor='#03A9F4'
            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
            title='VIEW NOW' />
        </Card>
      </ScrollView>
    )
  }
}

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 (
      <ScrollView>
        <Text> Setting View </Text>
        <Card
          title='Settings'
          image={require('../images/card.jpg')}>
          <Text style={{marginBottom: 10}}>
            The idea with React Native Elements is more about component structure than actual design.
          </Text>
          <Button
            icon={{name: 'code'}}
            backgroundColor='#03A9F4'
            buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
            title='VIEW NOW' />
        </Card>
      </ScrollView>
    )
  }
}

export {SettingView}

是不是清爽很多？

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

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