react navigation -NavigationActions 详细配置（中文版）

说明

本文是根据 navigation action 的官方最新文档一步一步写出来的配置，没个配置都有加详细的说明，如果说明不够理解请将页面滚动到最底部 加 qq 群一起讨论
下面代码注释可以取消看效果

如果你觉得该文章对你有帮助加个喜欢，github 加个 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({
            // 跳转到指定的chat
            routeName: 'Chat',
            params: {
                // 带的参数
                title: 'test'
            },
            // action 如果想跳转到指定路由 chat 的子 屏幕路由 请使用该方式 请参考下面的案例
            action: NavigationActions.navigate({ routeName: 'ChatScreen' })
        })
        return (
            
                
                        this.props.navigation.dispatch(navigateAction)}
                    title="Go back from this HomeScreen"
                />
            
        )
    }
}

class ChatScreen extends Component {
    render() {
        const backAction = NavigationActions.back({
            //返回上一屏幕并关闭当前屏幕。返回( back )动作创建者具有一个可选参数：
            key: 'Chat' //  可选 - 如果设置，导航将从给定的键返回。如果为空，导航将返回任何地方.
        })
        const setParamsAction = NavigationActions.setParams({
            // 当发送SetParams动作时，路由器将产生一个新的状态，该状态改变了特定路由的参数，由密钥标识
            params: {
                // 带的参数
                test: 'Hello'
            },
            key: 'Chat' // 路由 key 应该得到新的参数
        })
        const resetAction = NavigationActions.reset({
            // 重置堆栈式导航的路由顺序
            index: 1, // 到哪个索引的路由中去
            actions: [
                NavigationActions.navigate({ routeName: 'Chat' }),
                NavigationActions.navigate({ routeName: 'Home' })
            ]
        })

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

const StackHome = ({ navigation }) => {
    return (
        
            stackHome
             {
                    navigation.navigate('Chat1')
                }}
                title="go to StackChat"
            />
        
    )
}
const StackChat = ({ navigation }) => {
    const navigateAction = NavigationActions.navigate({
        // 跳转到指定的chat
        routeName: 'Chat',
        params: {
            // 带的参数
            title: 'test'
        },
        action: NavigationActions.navigate({ routeName: 'Home1' })
    })
    return (
        
            stackChat
             {
                    navigation.dispatch(navigateAction)
                }}
                title="navigatea action"
            />
        
    )
}

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

如果你对文章感兴趣 或者有其他技术问题探讨

qq群：218618405
github 地址：https://github.com/Sawyer-china/
本实例 地址： https://github.com/Sawyer-china/react-navigation-demo