【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

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

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和一些状态管理工具】

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

组件内部事件触发

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

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


标题:【IWH冬@ReactNative】路由导航器的使用:react-navigation-stack react-navigation
作者:yf_d
地址:看看我的CSDN