react-navigation

react-navigation是react官方推薦的新路由。主要是爲了原路由內存及卡頓的問題。

react-navigation目標分爲三種導航：

StackNavigator相似頂部導航條，用來跳轉頁面和傳遞參數。
TabNavigator相似底部標籤欄，用來區分模塊。
DrawerNavigator抽屜，相似從App左側滑出一個頁面。

 

StackNavigator

---

navigationOptions：配置StackNavigator的一些屬性。

title：標題，若是設置了這個導航欄和標籤欄的title就會變成同樣的，因此不推薦使用這個方法。
header：能夠設置一些導航的屬性，固然若是想隱藏頂部導航條只要將這個屬性設置爲null就能夠了。
headerTitle：設置導航欄標題，推薦用這個方法。
headerBackTitle：設置跳轉頁面左側返回箭頭後面的文字，默認是上一個頁面的標題。能夠自定義，也能夠設置爲null
headerTruncatedBackTitle：設置當上個頁面標題不符合返回箭頭後的文字時，默認改爲"返回"。（上個頁面的標題過長，致使顯示不下，因此改爲了短一些的。）
headerRight：設置導航條右側。能夠是按鈕或者其餘。
headerLeft：設置導航條左側。能夠是按鈕或者其餘。
headerStyle：設置導航條的樣式。背景色，寬高等。若是想去掉安卓導航條底部陰影能夠添加elevation: 0，iOS下用shadowOpacity: 0。
headerTitleStyle：設置導航條文字樣式。安卓上若是要設置文字居中，只要添加alignSelf:'center'就能夠了。在安卓上會遇到，若是左邊有返回箭頭致使文字仍是沒有居中的問題，最簡單的解決思路就是在右邊也放置一個空的按鈕。
headerBackTitleStyle：設置導航條返回文字樣式。
headerTintColor：設置導航欄文字顏色。總感受和上面重疊了。
headerPressColorAndroid：安卓獨有的設置顏色紋理，須要安卓版本大於5.0
gesturesEnabled：是否支持滑動返回手勢，iOS默認支持，安卓默認關閉
gestureResponseDistance：對象覆蓋觸摸從屏幕邊緣開始的距離，以識別手勢。 它須要如下屬性：
horizontal - number - 水平方向的距離 默認爲25。
vertical - number - 垂直方向的距離 默認爲135。

 

效果

mode：定義跳轉風格。

　　card：使用iOS和安卓默認的風格。
　　modal：iOS獨有的使屏幕從底部畫出。相似iOS的present效果
headerMode：邊緣滑動返回上級頁面時動畫效果。

　　float：iOS默認的效果，能夠看到一個明顯的過渡動畫。
　　screen：滑動過程當中，整個頁面都會返回。
　　none：沒有動畫。
cardStyle：自定義設置跳轉效果。

transitionConfig： 自定義設置滑動返回的配置。
onTransitionStart：當轉換動畫即將開始時被調用的功能。
onTransitionEnd：當轉換動畫完成，將被調用的功能。

path：路由中設置的路徑的覆蓋映射配置。
initialRouteName：設置默認的頁面組件，必須是上面已註冊的頁面組件。
initialRouteParams：初始路由的參數。

path:path屬性適用於其餘app或瀏覽器使用url打開本app並進入指定頁面。path屬性用於聲明一個界面路徑。

新建一個ChatScreen.js文件。navigationOptions屬性爲導航的基本信息，能夠包括標題等。

import React from 'react';
import {
    Text,
    View,
    Button
} from 'react-native';
export default class ChatScreen extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,
    });
    render() {
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Text>Chat with {params.user}</Text>
            </View>
        );
    }
}

新建HomeScreen.js文件。

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button
} from 'react-native';

export default class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',//在導航中顯示的標題內容
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>Hello, Chat App!</Text>
                <Button
                    onPress={() => navigate('Chat',{user:'111'})}
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}

新建App.js文件添加這兩個頁面到路由

import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen'
import ChatScreen from './ChatScreen'
const SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Chat: {
        screen: ChatScreen
    },
});
export default SimpleApp;

 

TabNavigator

---

import React from 'react';
import {
    StyleSheet,
    Button
} from 'react-native'
import { TabNavigator } from 'react-navigation';
class MyHomeScreen extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Home',
        // Note: By default the icon is only shown on iOS. Search the showIcon option below.
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('./image/img_74.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Notifications')}
                title="Go to notifications"
            />
        );
    }
}

class MyNotificationsScreen extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Notifications',
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('./image/img_74.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back home"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26,
    },
});

const MyApp = TabNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
        screen: MyNotificationsScreen,
    },
}, {
    tabBarPosition: 'bottom',
    animationEnabled: true,
    tabBarOptions: {
        activeTintColor: '#e91e63',
    },
});
export default MyApp;

 

DrawerNavigator

---

import React from 'react';
import {
    StyleSheet,
    Button,
    Image
} from 'react-native'
import { DrawerNavigator } from 'react-navigation';
class MyHomeScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('./image/img_74.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Notifications')}
                title="Go to notifications"
            />
        );
    }
}

class MyNotificationsScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Notifications',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('./image/img_74.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back home"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});

const MyApp = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
        screen: MyNotificationsScreen,
    },
});
export default MyApp;

完整demo：https://github.com/lemonzwt/react-native-demo