React Native Navigation 组件到底怎么使用this.props.navigation.navigate

今天就路由导航的问题来说下我的理解。

首先要提醒一下想入门的朋友一定要看API 多看，不懂英文的可以中英文对照。

https://reactnavigation.org/docs/zh-Hans/getting-started.html react-navigation官方网站
 

import React from 'react';

import { createStackNavigator, createAppContainer } from 'react-navigation';

// 1 导入组件

import TabScreen from './views/TabBar'

import DetailsScreen from './views/Details';


// 2 首先你要定义的跳转createStackNavigator

const RootStack = createStackNavigator({

Tab : {

screen : TabScreen,

navigationOptions : {

header : null

}

},

Details : {

screen : DetailsScreen,

}

}

/**

*

* this.props.navigation：navigation prop 传递给每个在 stack navigator 中定义的（ **屏幕组件</ strong>）

* navigate（'Details'）：我们使用用户将要跳转的路由的名称来调用navigate方法。

*

*/

);

// 3 App 容器负责管理应用的 state

const AppContainer = createAppContainer(RootStack);


// 4 并将顶层的 navigator 链接到整个应用环境

export default class App extends React.Component {

render() {

return <AppContainer />;

}

}

现在才明白，整了一周导航器了！

在TabScreen 和 DetailsScreen 中才能访问 this.props.navigation.navigate（'Details'），也就是说没有在这个stack中注册的组件都不能直接访问，所以组件里面嵌套的组件都要将本组件的props的navigation对象传递过去，不然会报错 ：React Navigation - cannot read property 'navigate' of undefined

这是我在TabScreen 组件中Car 是我自己定义的组件，我是这样子传值的

<Car navigation = {this.props.navigation}></Car>

在car组件中使用FlatViews的传值：

<FlatViews navigation = {this.props}/>

FlatViews 中接收值：

this.props.navigation.navigation.navigate('Details');

注意：这里之所以多了一个navigation 是因为我组装的传值多了一层，要根据自己的数据结构来