通过上面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
