說明

本文是根據(jù) navigation action 的官方最新文檔一步一步寫出來的配置，沒個(gè)配置都有加詳細(xì)的說明嫉拐，如果說明不夠理解請將頁面滾動(dòng)到最底部 加 qq 群一起討論
下面代碼注釋可以取消看效果

如果你覺得該文章對你有幫助加個(gè)喜歡闸天，github 加個(gè) start 謝謝

import React, { Component } from 'react'
import { Platform, StyleSheet, View, Text, Button, Image } from 'react-native'
import {
    NavigationActions,
    TabNavigator,
    StackNavigator
} from 'react-navigation'

class HomeScreen extends Component {
    render() {
        console.log(this.props.navigation.params)
        const navigateAction = NavigationActions.navigate({
            // 跳轉(zhuǎn)到指定的chat
            routeName: 'Chat',
            params: {
                // 帶的參數(shù)
                title: 'test'
            },
            // action 如果想跳轉(zhuǎn)到指定路由 chat 的子 屏幕路由 請使用該方式 請參考下面的案例
            action: NavigationActions.navigate({ routeName: 'ChatScreen' })
        })
        return (
            <View>
                <Button
                    onPress={() =>
                        this.props.navigation.dispatch(navigateAction)}
                    title="Go back from this HomeScreen"
                />
            </View>
        )
    }
}

class ChatScreen extends Component {
    render() {
        const backAction = NavigationActions.back({
            //返回上一屏幕并關(guān)閉當(dāng)前屏幕虹钮。返回( back )動(dòng)作創(chuàng)建者具有一個(gè)可選參數(shù)：
            key: 'Chat' //  可選 - 如果設(shè)置趴酣，導(dǎo)航將從給定的鍵返回徒探。如果為空威兜，導(dǎo)航將返回任何地方.
        })
        const setParamsAction = NavigationActions.setParams({
            // 當(dāng)發(fā)送SetParams動(dòng)作時(shí)销斟，路由器將產(chǎn)生一個(gè)新的狀態(tài)，該狀態(tài)改變了特定路由的參數(shù)牡属，由密鑰標(biāo)識
            params: {
                // 帶的參數(shù)
                test: 'Hello'
            },
            key: 'Chat' // 路由 key 應(yīng)該得到新的參數(shù)
        })
        const resetAction = NavigationActions.reset({
            // 重置堆棧式導(dǎo)航的路由順序
            index: 1, // 到哪個(gè)索引的路由中去
            actions: [
                NavigationActions.navigate({ routeName: 'Chat' }),
                NavigationActions.navigate({ routeName: 'Home' })
            ]
        })

        return (
            <View>
                <Text>fdsafasf dsa </Text>
                <Button
                    onPress={() => this.props.navigation.dispatch(backAction)}
                    title="back"
                />
                <Button
                    onPress={() => {
                        return this.props.navigation.dispatch(setParamsAction)
                    }}
                    title="setParams"
                />
                <Button
                    onPress={() => {
                        console.log(this.props.navigation)
                    }}
                    title="update Params"
                />
                <Button
                    onPress={() => {
                        this.props.navigation.dispatch(resetAction)
                    }}
                    title="resetActive"
                />
            </View>
        )
    }
}

const StackHome = ({ navigation }) => {
    return (
        <View>
            <Text>stackHome</Text>
            <Button
                onPress={() => {
                    navigation.navigate('Chat1')
                }}
                title="go to StackChat"
            />
        </View>
    )
}
const StackChat = ({ navigation }) => {
    const navigateAction = NavigationActions.navigate({
        // 跳轉(zhuǎn)到指定的chat
        routeName: 'Chat',
        params: {
            // 帶的參數(shù)
            title: 'test'
        },
        action: NavigationActions.navigate({ routeName: 'Home1' })
    })
    return (
        <View>
            <Text>stackChat</Text>
            <Button
                onPress={() => {
                    navigation.dispatch(navigateAction)
                }}
                title="navigatea action"
            />
        </View>
    )
}

const stackNavigator = StackNavigator({
    Home1: {
        screen: StackHome,
        navigationOptions: {
            headerTitle: 'Stack首頁'
        }
    },
    Chat1: {
        screen: StackChat,
        navigationOptions: {
            headerTitle: 'StackChat'
        }
    }
})

const tabNavigator = TabNavigator({
    Home: {
        screen: stackNavigator
    },
    Chat: {
        screen: stackNavigator
    }
})

export default tabNavigator

如果你對文章感興趣 或者有其他技術(shù)問題探討

qq群：218618405
github 地址：https://github.com/Sawyer-china/
本實(shí)例 地址： https://github.com/Sawyer-china/react-navigation-demo