通過上面3節(jié)內容牛隅，我們的 App.js 這個文件相當龐大炕柔，因為我們兩個 Tab 兩個頁面都在這一個文件中。下面我們把它們分割開來媒佣。
首先再創(chuàng)建一個目錄 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選擇狀態(tài)
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
