【IWH冬@ReactNative】路由导航器的使用：react-navigation-stack react-navigation

Rn0.6的版本，如果你直接yarn add react-navigation是最新的路由，它去除的很多之前的模块，你需要自己单独安装，网上很多都是旧的，你直接使用，导入一堆报错，还有就是在MainJAVA里面导入包后，很多组件是不需要加入 return new XPackage的！！！

我是自定义的底部栏，所以只需要一个堆导航，不需要底部导航

yarn add react-navigation
yarn add react-navigation-stack

创建一个路由【后面叫导航器】

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const AppStack = createStackNavigator({
//路由名字
    Main: {
//显示组件
        screen: App,
//配置页面：顶部标题
        navigationOptions:{
            headerTitle:"蓝点Poi采集 beta0.2"
        }
    },
    My:{
        screen:My,
        navigationOptions:{
            headerTitle:"我的"
        }
    },
    History:{
        screen:History,
        navigationOptions:{
            headerTitle:"历史记录"
        }
    }
})

把原来的入口组件包装一下

AppRegistry.registerComponent(appName, () => createAppContainer(AppStack));

应用内部通过事件触发导航，以App组件内部的footer为例子，通过导航器创建的路由组件自带一个navigation属性，你可以通过Props传给子组件【我没有用context和一些状态管理工具】

1
2
<Footers search={this.search.bind(this)} navigation={this.props.navigation}
                            navIndex={this.state.navIndex}/>

组件内部事件触发

this.props.navigation.navigate('My')

这个导航还是有动画效果的，感觉是用的Fragment实现的。