React Native (一)：基礎(chǔ)
React Native (二)：StatusBar 公罕、 NavigationBar 與 TabBar
React Native (三)：自定義視圖
React Native (四)：加載新聞列表
React Native (五)：上下拉刷新加載
React Native (六)：加載所有分類與詳情頁
React Native App 的視圖結(jié)構(gòu)
首先把 setup.js 的 Root 以及 布局 的代碼改一下：
class Root extends React.Component {
render() {
return (
<View style={styles.container}>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
});
React Native 的所有界面都是在一個主視圖上制圈，這里的這個 <View> 跟 iOS 中的 Window 是同樣的邓尤，這里跟 Android 不太一樣。
當(dāng)然運行在 iOS 和 Android 中還是以 ViewController 和 Activity 展示的剩檀。
StatusBar
iOS 和 Android 的 StatusBar 是差不多的憋沿，都是頂部那高度 20 的部分，用來顯示信號沪猴、電量等系統(tǒng)的信息辐啄。
在 setup.js 中加入 StatusBar：
import {
StyleSheet,
Text,
View,
StatusBar
} from 'react-native';
class Root extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBar
barStyle={'light-content'}
backgroundColor={'#000000'}
/>
</View>
);
}
}
StatusBar 的配置可以看這里，注意有些屬性只針對特定平臺运嗜。
這樣可以設(shè)置整個 App 中 StatusBar 的樣式壶辜，如果有某個頁面 A 的 StatusBar 需要特殊處理，那么就在 A 頁面加入 StatusBar 進(jìn)行設(shè)置担租。
Navigator
我們需要用 Navigator 來讓整個 App 可以在頁面之間跳轉(zhuǎn)砸民。
Navigator 和 iOS 的一樣，都是對頁面進(jìn)行 push 和 pop 翩活，跟 Android 的 NavigationView 不是一個東西阱洪。
官方文檔在這里
現(xiàn)在在 App 文件夾內(nèi)創(chuàng)建一個新的文件 App.js ：
'use strict';
import React from 'react'
import {
StyleSheet,
View,
Text
} from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.view}>
<Text>main</Text>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center'
},
});
然后在 setup 內(nèi) StatusBar 下面加入 Navigator :
import App from './App'
<Navigator
initialRoute={{ component: App }}
style={{flex:1}}
renderScene={(route, navigator) => {
BackAndroid.addEventListener('hardwareBackPress', function() {
if(navigator == null){
return false;
}
if(navigator.getCurrentRoutes().length === 1){
return false;
}
navigator.pop();
return true;
});
let Component = route.component;
return <Component {...route.params} navigator={navigator}/>
// 上面的route.params 是為了方便后續(xù)界面間傳遞參數(shù)用的
}}
/>
其中 initialRoute 設(shè)置了 component ，是最底層的第一個頁面菠镇。
然后 renderScene 控制 push 的時候做哪些操作冗荸，這里的 BackAndroid.addEventListener 是監(jiān)聽了 Android 的物理返回按鍵。
現(xiàn)在運行可以看見頁面中間有個 main ：
你可能會發(fā)現(xiàn)為什么沒 NavigationBar 呢利耍，我們后面再加蚌本。
tab-navigator
官方并沒有 TabBar ，我們使用一個第三方 react-native-tab-navigator
在項目根目錄執(zhí)行命令
npm install react-native-tab-navigator --save
安裝完成后在 App.js 加入 TabNavigator:
const home_key = 'home'
const satin_key = 'satin'
const setting_key = 'setting'
import Home from './Home/Home'
import Satin from './Satin/Satin'
import Setting from './Setting/Setting'
<TabNavigator>
<TabNavigator.Item
selected={this.state.selectedTab === home_key}
title="首頁"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("./Images/root/home_unselect.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("./Images/root/home_select.png")} />}
onPress={() => this.setState({ selectedTab: home_key })}>
<Home navigator={this.props.navigator}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === satin_key}
title="段子"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("./Images/root/activity_unselect.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("./Images/root/activity_select.png")} />}
onPress={() => this.setState({ selectedTab: satin_key })}>
<Satin navigator={this.props.navigator}/>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === setting_key}
title="我的"
titleStyle={styles.tabText}
selectedTitleStyle={styles.selectedTabText}
renderIcon={() => <Image style={styles.icon} source={require("./Images/root/my_unselect.png")} />}
renderSelectedIcon={() => <Image style={styles.icon} source={require("./Images/root/my_select.png")} />}
onPress={() => this.setState({ selectedTab: setting_key })}>
<Setting navigator={this.props.navigator}/>
</TabNavigator.Item>
</TabNavigator>
配置也比較易懂隘梨。
另外創(chuàng)建 3 個文件 Home.js 程癌、 Satin.js 和 Setting.js
import React from 'react'
import {
View,
StyleSheet
} from 'react-native'
export default class Satin extends React.Component {
render() {
return (
<View style={styles.view}>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
flex:1,
backgroundColor: 'orange'
}
})
可以給每個設(shè)置不同的顏色，這樣點擊界面切換也很明顯轴猎。
具體的代碼可以看 項目
NavigationBar
同意官方也沒有提供 NavigationBar嵌莉，我們需要自定義一個。
然后在 Home.js 捻脖、 Satin.js 和 Setting.js 加入
import React from 'react'
import {
View,
StyleSheet
} from 'react-native'
import NavigationBar from '../Custom/NavBarCommon'
export default class Home extends React.Component {
render() {
return (
<View style={styles.view}>
<NavigationBar
title="首頁"
unLeftImage={true}
/>
</View>
)
}
}
const styles = StyleSheet.create({
view: {
flex:1,
backgroundColor: 'white'
}
})
