JS综合开发 顶部+导航+网络请求+数据显示+跳转！！！

首先设置导航：

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"
  }
});