顶部导航栏

                                              **Rn路由配置**
                                         
                                                 顶部导航栏
1    加载路由插件包  
                           yarn add react-navigation@2.18.0

2 在路由创建页面导入插件包

                    import { createTabNavigator} from 'react-navigation';

3 创建路由
创建一个文件夹在文件夹里创建一个js文件 用来盛放页面（相当于Android的Activity 而页面相当于Fragment）

       这个文件里面的代码：
                                   import React, { Component } from "react";
                                   import { withNavigation } from "react-navigation";
                                  import { FlatList, Text } from "react-native";
                                  import {getData} from "../Utils/fetchData"

                                class List extends Component {
                                      constructor(props) {
                                      super(props);
                                      this.state = {
                                      page: 1, //请求第几页
                                      tab: this.props.tab, //请求的类别
                                      limit: 15, //每次请求数据条目数
                                      data: [] //存后台获取的数据
                        };
                    }

										                                
										//   //网络请求数据
										//   //  将请求数据的方法放在生命周期的方法里面
										//   // 就是当页面生成之后去请求数据
										//   async componentDidMount() {
										//     //调用请求数据的方法获取数据
										//     let data = await this.requestData();
										//     // 将获取到的数据存入状态里的data
										//     this.setState({
										//       data: data
										//     });
										//   }
                
                               //生命周期调用请求第一页的数据  
                                      async componentDidMount() {
                                             this.requestFirstPage();
                                        }
            
                        
                           
                                //设置网络请求的方法
                                //方法名自定义  requestData
                                //async 异步任务的标志
                                 requestData = async () => {
                                    // let api =
                             //   "https://cnodejs.org/api/v1" +
                            //   "/topics" +
                             //   "?page=" +
                            //   this.state.page +
                            //   "&tab=" +
                            //   this.state.tab +
                           //   "&limit=" +
                          //   this.state.limit;
               
                 let res = await  getData("/topics" , {page : this.state.page , tab : this.state.tab , limit :this.state.limit})


                           // // alert(url)
                          // //发起请求返回数据
                          // let res = await fetch(api);
                           // //解析
                          // res = await res.json();

                         // let data = res.data;
                      return res;
             };  

            
        //定义下拉刷新的方法
                  
										                      requestFirstPage =()=>{
										                               //重置为第一页后  在请求数据
										                                 this.setState(
										                                         {
										                                                page :1, refreshed :true
										                                          }, 
										        
													                                     async ()=>{
													                                            let res = await this.requestData();  
													                                            this.setState({
													                                           data : res.data,
													                                           refreshed : false
																							       })
																							    })
																	}

			    //上拉加载更多的方法定义
									       requestNextPage = () =>{
									           
									          this.setState({
									
									              page:this.state.page+1,
									              refreshed : true
									          },
									          async  ()=>{
									            let res =await this.requestData()
									            //合并以前数据
									            this.setState({
									                data :[...this.state.data , ...res.data],
									                refreshed : false
									            })
									        })
									        
									       }



                render() {
                            return (
                               //使用map关键字遍历获取到的数据中的
                            <FlatList
                                   data = {this.state.data}
                                     renderItem = {({item}) =>{
                                         return <Text style ={{
                                         padding : 20 ,
                                         borderBottomWidth : 1,
                                          borderColor :"#ddd"

                                        }}>{item.title}</Text>
                       }} 
                                      keyExtractor = {(item , index) => index.toString()},
                                         //设置刷新加载的图标
										  refreshing = {this.state.refreshed}
										  //设置下拉刷新    requestFirstPage是自定义的刷新方法
									     onRefresh = {this.requestFirstPage}
                                       
                    
                                          //下拉加载更多设置
							            onEndReached = {this.requestNextPage}
							            //设置屏幕显示到底部的距离
							            onEndReachedThreshold ={0.001}

                            />
  
                                );
                       }
            }
                            export default withNavigation(List);

4 //设置页面创建路由表

                    import React, { Component } from "react";
                   import { createTabNavigator } from "react-navigation";
                   import List from "../Page/List";

                          //给List页面通过键传递页面名字
                        const Good = () => {
                       //给页面设置名字的键值
                          return <List tab="good" />;
                    };

                   const Share = () => {
                      return <List tab="share" />;
                };

                  const Ask = () => {
                       return <List tab="ask" />;
               };

                    const Job = () => {
                        return <List tab="job" />;
                  };

                   //设置页面创建路由表
                     const TopTabNav = createTabNavigator({
                      //给页面设置名字 与  键对应

                   Good: {
                      screen: Good,
                      navigationOptions: {
                      title: "精华"
                    }
                },
         
             Share:{
                         screen: Share,
                        navigationOptions: {
                            title: "分享"
                        }
                  },
                  Ask: {
                       screen: Ask,
                      navigationOptions: {
                     title: "问答"
                }
          },

                     Job: {
                           screen: Job,
                         navigationOptions: {
                            title: "工作"
                           }
               }
         });

                       export default TopTabNav;