-

1. * create head navigation bar

*

import React from "react";
import { createTabNavigator } from "react-navigation";
import List from "./List";
//Add a reuse
const Good = () => {
  return <List />;
};
const Share = () => {
  return <List />;
};
const Ask = () => {
  return <List />;
};
const Job = () => {
  return <List />;
};
//Set title
const TestBasic = createTabNavigator(
  {
    Good: {
      navigationOptions: {
        title: "Essence"
      },
      screen: Good
    },
    Share: {
      navigationOptions: {
        title: "share"
      },
      screen: Share
    },
    Ask: {
      navigationOptions: {
        title: "Questions and answers"
      },
      screen: Ask
    },
    Job: {
      navigationOptions: {
        title: "work"
      },
      screen: Job
    }
  },
  {
  //Style navigation bar
    lazy: true,
    tabBarPosition: "top",
    swipeEnabled: true,
    animationEnabled: true
  }
);
export default TestBasic;

Add yarn package yarn add react navigation (note the space)

2. Pull down loading

Let's look at the List

import React, { Component } from "react";
import { TouchableOpacity } from "react-native";
import { withNavigation } from "react-navigation";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
import { getData } from "./Fetech";
import Item from "./Item";
import {} from "react-native";

class List extends Component {
//The number of pages is page limit Is the number of pages per load
  constructor(props) {
    super(props);
    this.state = {
      refreshState: RefreshState.Idle,
      page: 1,
      limit: 10
    };
  }
  requstData = async () => {
    let obj = {
      page: this.state.page,
      limit: this.state.limit
    };
    //getData It's a tool class. See the last tool class get,post
    let data = await getData("/topics", obj);
    //to data Setting parameters
    return data.data;
  };
  requestFirData = () => {
    try {
      this.setState(
        {
        //Reset the number of pages to1
          refreshState: RefreshState.HeaderRefreshing,
          page: 1
        },
        async () => {
        //Request again
          let data = await this.requstData();
          this.setState({
            data: data,
            refreshState: RefreshState.Idle
          });
        }
      );
    } catch (error) {
      this.setState({
        refreshState: RefreshState.Failure
      });
    }
  };
  requesNextData = () => {
    try {
      this.setState(
        {
          refreshState: RefreshState.FooterRefreshing,
          page: this.state.page + 1
        },
        async () => {
          let data = await this.requstData();
          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.requestFirData();
  }
  headreRefresh = () => {
    this.requestFirData();
  };
  footreRefresh = () => {
    this.requesNextData();
  };
  renderItem = rowData => {
    return (
      <TouchableOpacity
        onPress={() =>
          this.props.navigation.navigate("Xiang", {
            id: rowData.item.content
            //Jump to details page
          })
        }
      >
        <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.headreRefresh}
        onFooterRefresh={this.footreRefresh}
      />
    );
  }
}
export default withNavigation(List);

Add another pull-up refresh component,
Add dependency directly to the terminal: react native refresh list view

3. jump

To jump, you must write the list and detail page in a container (equivalent to the container). You can jump only when you write them in this container. Normal jumps will not be triggered.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
//Jump components
import { createStackNavigator } from "react-navigation";
import TestBasic from "./TestBasic";
import Xiang from "./Xiang";
const Nav = createStackNavigator({
  TestBasic: {
    screen: TestBasic,
    navigationOptions: {
      header: null
    }
  },

  Xiang: Xiang
});
export default Nav;

4. details page

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";

import { Text, View, StyleSheet, Image } from "react-native";

export default class Item extends Component {
  render() {
    return (
      <View style={styles.box}>
        <View style={styles.box}>
          <Text>{this.props.item.title}</Text>
        </View>
        <View style={styles.container}>
          <View>
            <Image
              style={styles.avatar}
              source={{ uri: this.props.item.author.avatar_url }}
            />
          </View>
          <View>
            <Text>{this.props.item.author.loginname}</Text>
          </View>
          <View>
            <Text>{this.props.item.visit_count}</Text>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  box: {
    padding: 10
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 5,
    borderBottomWidth: 1,
    borderBottomColor: "gray"
  },
  left: {
    flexDirection: "row",
    alignItems: "center"
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40
  },
  title: {
    flexWrap: "wrap"
  },
  txt: {
    fontSize: 15,
    color: "#000"
  }
});

5. Network tools

export const baseURL = "https://cnodejs.org/api/v1";

// Splicing get parameter
export const getURL = (url, params) => {
  let paramsArray = [];
  Object.keys(params).forEach(key => paramsArray.push(key + "=" + params[key]));
  if (url.search(/\?/) === -1) {
    url += "?" + paramsArray.join("&");
  } else {
    url += "&" + paramsArray.join("&");
  }
  return url;
};

//adopt get get data,url Is the interface address, obj Is the data object sent to the background
export const getData = async (url, obj) => {
  // console.error(11);
  url = obj ? getURL(url, obj) : url; //Convert to required url
  let res = await fetch(baseURL + url, { method: "GET" });
  let json = res.json();
  return json;
};

//adopt post get data,url Is the interface address, obj Is the data object sent to the background
export const postData = async (url, obj) => {
  let res = await fetch(baseURL + url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(obj)
  });
  let json = await res.json();
  return json;
};