今天就路由导航的问题来说下我的理解。
首先要提醒一下想入门的朋友一定要看API 多看,不懂英文的可以中英文对照。
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 是因为我组装的传值多了一层,要根据自己的数据结构来