React Navigation
React Navigation 分為stack navigator，tab navigation屉来， drawer navigation。能夠提供原生的手勢(shì)和動(dòng)畫效果狈癞。
stack navigator
createStackNavigator 返回一個(gè) React組件茄靠，如果是單獨(dú)的導(dǎo)航欄控制器，可以視為rootController蝶桶。createStackNavigator是一個(gè)函數(shù)慨绳，接收一個(gè)路由對(duì)象和optional config 對(duì)象，router對(duì)象key->value;
// app.js 文件
import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
// 導(dǎo)出模塊
export default createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: () => ({
title: 'Home',
}),
},
});
// index.js 中注冊(cè)組件
AppRegistry.registerComponent('ReactApp', () => App);
router跳轉(zhuǎn)真竖，需要聲明router對(duì)象,可以傳遞參數(shù),通過getParam接收
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title = "jump to Mine"
onPress={() => this.props.navigation.navigate('Mine',{
id:100
})}
/>
</View>
);
}
}
class MineScreen extends React.Component {
render() {
let {navigation} = this.props;
let cusId = navigation.getParam('id','cusId')
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Mine Screen</Text>
<Text>傳遞ID參數(shù): {cusId}</Text>
</View>
);
}
}
export default createStackNavigator({
Home: {
screen: HomeScreen,
},
Mine: {
screen: MineScreen,
}
},{
initialRouteName: 'Home'
});
navigation標(biāo)題 樣式設(shè)置脐雪，如何不覆蓋，會(huì)共享navigationOptions,
class MineScreen extends React.Component {
static navigationOptions = {
title: 'MineScreen',
};
static navigationOptions = ({ navigation }) => {
return {
// 標(biāo)題
title: navigation.getParam('otherParam'),
headerTintColor: 'blue',
headerTitleStyle: {
fontWeight: 'bold',
},
// left barItem
headerRight: (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color= "blue"
/>
),
};
};
//
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Mine Screen</Text>
</View>
);
}
}
Tab navigation
生成簡(jiǎn)單的tabbar,通過navigationOptions設(shè)置底部tabnav恢共，tabBarIcon也是一個(gè)又返回值的函數(shù)战秋，tabBarOptions設(shè)置item屬性
import React from 'react';
import { View, Text, Button, Image, Icon, StyleSheet, SafeAreaView,StatusBar } from 'react-native';
import { createStackNavigator,NavigationComponent,createBottomTabNavigator } from 'react-navigation';
// 首頁
class HomeScreen extends React.Component {
static navigationOptions = {
title: "Home"
}
render() {
return (
<SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title = "jump to Mine"
onPress={() => this.props.navigation.push('Details',{
id:1
})}
/>
</SafeAreaView>
);
}
}
// 跳轉(zhuǎn)頁 details
class DetailsScreen extends React.Component {
static navigationOptions = () => {
return {
// 標(biāo)題
title: "Details",
}
}
render() {
let { navigation } = this.props;
// 傳遞值
let cusId = navigation.getParam('id', 'cusId')
return (
// ios 安全區(qū)域
<SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<StatusBar
barStyle="dark-content"
backgroundColor="blue"
/>
<Text>Mine Screen</Text>
<Text>傳遞ID參數(shù): {cusId}</Text>
</SafeAreaView>
);
}
}
// 我的
class MineScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
// 標(biāo)題
title: 'Mine',
headerTintColor: 'blue',
headerTitleStyle: {
fontWeight: 'bold',
},
// left barItem
headerRight: (
<Button
onPress={() => alert('This is a button!')} title="Info" color= "blue"
/>
),
};
};
// 組件掛載完成后，改動(dòng)navigation旁振，
// componentDidMount() {
// this.props.navigation.setParams({ increaseCount: this._increaseCount });
// }
render() {
let {navigation} = this.props;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Mine Screen</Text>
</View>
);
}
}
// 導(dǎo)航欄1
const nav1 = createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: () => ({
title: 'Home',
tabBarComponent:null
},{
mode: 'card',
navigationOptions: {
gesturesEnabled: true,
},
}),
},
Details: {
screen: DetailsScreen,
}
},{
initialRouteName: 'Home'
});
//導(dǎo)航欄2
const nav2 = createStackNavigator({
Mine: {
screen: MineScreen,
}
}, {
initialRouteName: 'Mine'
});
export default createBottomTabNavigator(
{
Home:nav1,
Mine: nav2
},
{
// tabbar 配置
navigationOptions: ({ navigation }) => ({
tabBarLabel: navigation.state.routeName,
tabBarVisible: navigation.state.index>0 ? false:true, // 顯示tabbar
tabBarIcon: ({ tintColor,focused }) => {
let routeName = navigation.state.routeName
let soucrePath
if (routeName === 'Home') {
soucrePath = focused ? imageArr[1] : imageArr[0]
} else if (routeName === 'Mine') {
soucrePath = focused ? imageArr[3] : imageArr[2]
}
return <Image style={[{ width: 24, height: 24 }]} source={soucrePath} />
},
}),
tabBarOptions: {
showIcon: true
},
}
);
const imageArr = [
require('./src/res/images/home_n.png'),
require('./src/res/images/home_s.png'),
require('./src/res/images/mine_n.png'),
require('./src/res/images/mine_s.png')
]
