首先設定導航：

import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import TopNav from "./TopNav";
import Detail from "./Detail";
const LuYou = createStackNavigator({
  TopNav: {
    screen: TopNav,
    navigationOptions: {
      header: null             //導航跳轉先設定為null
    }
  },
  Detail: Detail                //第二個頁面也就是你要跳到哪個頁面
});
export default class Home extends Component {
  render() {
    return <LuYou />; //這是路由的佈局
  }
}
 

在設定頂部按鈕：

import React from "react";
import { createTabNavigator } from "react-navigation"; // 匯入頭部導航
import List from "./List";   //這裡我用到了倆個佈局前4個載入這個佈局
import Lists from "./Lists";    //最後一個載入這個佈局

const One = () => {             
  return <List tab="good" />;   //這是傳給List中tab的值
};

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

const Three = () => {
  return <List tab="share" />;
};
const Four = () => {
  return <List tab="job" />;
};
const Fours = () => {           //最後這個是載入的Lists這個頁面
  return <Lists tab="job" />;   //因為第二個佈局中什麼也沒用  這些是轉帖的懶得改了
};
const TopNav = createTabNavigator(   //這個就是重點了
  {
    One: {
      screen: One,   //One頂部按鈕的名字
      navigationOptions: {
        header: "精華"  //傳的引數
      }
    },
    Two: {
      screen: Two,
      navigationOptions: {
        header: "工作"
      }
    },
    Three: {
      screen: Three,
      navigationOptions: {
        header: "問答"
      }
    },
    Four: {
      screen: Four,
      navigationOptions: {
        header: "分享"
      }
    },
    Fours: {  //這個可以不用看了
      screen: Fours,
      navigationOptions: {
        header: "分享"
      }
    }
  },
  {
    lazy: true // 懶載入
  }
);
export default TopNav;   //對外開放
 

然後就可以去寫你的上拉下路請求等：

import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view"; // 上拉載入下拉重新整理依賴
import { withNavigation } from "react-navigation";
import Item from "./Item";
class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshState: RefreshState.Idle, // 預設重新整理狀態隱藏
      tab: this.props.tab,
      limit: 10, // 一次最多顯示10個
      page: 1, // 第一頁
      datas: [] // 資料來源
    };
  }
  requestData = async () => {
    let response = await fetch(
      "https://cnodejs.org/api/v1/topics?tab=" +
        this.state.tab +
        "&page=" +
        this.state.page +
        "&limit=" +
        this.state.limit
    );
    let responsejson = await response.json(); // 請求出來的結果
    return responsejson.data;
  };
  requestfistData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.HeaderRefreshing, // 重新整理頭部
          page: 1 // 將頁面設定成第一頁
        },
        async () => {
          let data = await this.requestData();
          this.setState({
            data: data, // 請求資料
            refreshState: RefreshState.Idle // 隱藏重新整理
          });
          // console.error(JSON.stringify(data));
        }
      );
    } catch (error) {
      this.setState({
        refreshState: RefreshState.Failure
      });
    }
  };
  requestNextData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.FooterRefreshing, // 重新整理底部
          page: this.state.page + 1 // 重新整理底部時，將頁面設定成下一頁
        },
        async () => {
          let data = await this.requestData();
          this.setState({
            data: [...this.state.data, ...data], // 重新整理過後，將下一頁的資料和上面的資料進行合併
            refreshState:
              this.state.data.length > 30
                ? RefreshState.NoMoreData
                : RefreshState.Idle
          });
        }
      );
    } catch (error) {
      this.setState({
        refreshState: RefreshState.Failure
      });
    }
  };
  componentDidMount() {
    this.requestfistData();
  }
  headerRefresh = () => {
    this.requestfistData();
  };
  footerRefresh = () => {
    this.requestNextData();
  };
  renderItem = rowData => {
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate("Detail", {
            id: rowData.item.id,
            title: rowData.item.title,
            content: rowData.item.content
          })
        }
      >
        <Item item={rowData.item} />
      </TouchableOpacity>
    );
  };
  render() {
    return (
      <RefreshListView
        data={this.state.data}
        keyExtractor={item => item.id}
        renderItem={this.renderItem}
        refreshState={this.state.refreshState}
        onHeaderRefresh={this.headerRefresh}
        onFooterRefresh={this.footerRefresh}
      />
    );
  }
}
export default withNavigation(List);
 

最後就是佈局的事情了：

import React, { Component } from "react";
import { Text, View, Image, StyleSheet } from "react-native";
import timeago from "timeago.js";

export default class Item extends Component {
  render() {
    const timeagoInstance = timeago(); //格式日期
    return (
      <View style={styles.box}>
        <Text style={styles.title}>{this.props.item.title}</Text>
        <View style={styles.container}>
          <View style={styles.left}>
            <Image
              style={styles.avatar}
              source={{ uri: this.props.item.author.avatar_url }}
            />
            <View>
              <Text>{this.props.item.author.loginname}</Text>
              <Text>
                {timeagoInstance.format(this.props.item.create_at, "zh_CN")}
              </Text>
            </View>
          </View>
          <View>
            <Text>
              閱讀量：
              {this.props.item.visit_count}
            </Text>
            <Text>
              回覆量：
              {this.props.item.reply_count}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  box: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: "#ddd"
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 5
  },
  left: {
    flexDirection: "row",
    alignItems: "center"
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 10
  },
  title: {
    fontWeight: "bold"
  }
});