关于RN的实现

首先需要运行路由，路由控制两个页面的交互。
路由分类：
StackNavigator 跳转页面，传值
TabNavigator 左右切换导航栏
createBottomTabNavigator 底部导航栏（图标）
createSwitchNavigator 身份验证选择

首先是在你的应用中安装此库：
yarn add react-navigation
使用三方图库、图标使用：
yarn add react-native-vector-icons
react-native link

import React, { Component } from "react";
import { createBottomTabNavigator } from "react-navigation";
import TopDemo from "./One/TopDemo";
import RenZheng from "./Two/RenZheng";
import Ionicons from "react-native-vector-icons/Ionicons";
import TiaoZhuan from "./One/TiaoZhuan";
const DiBu = createBottomTabNavigator(
  {
    TiaoZhuan: TiaoZhuan,
    RenZheng: {
      screen: RenZheng,
      navigationOptions: {
        title: "登录认证"
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "TiaoZhuan") {
          //切换不同的图标
          //iconName = `ios-document${focused ? "" : "-outline"}`;
          //iconName = `${focused ? "ios-document" : "ios-document-outline"}`;
          iconName = "ios-document";
        } else if (routeName === "RenZheng") {
          iconName = "ios-create";
        } else if (routeName === "My") {
          iconName = "ios-person";
        }

        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);
export default DiBu;

TiaoZhuan 是个路由，里面的TopDemo路由包含的是上拉加载下拉刷新的列表

import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import TopDemo from "./TopDemo";
import Detail from "./Detail";

const TiaoZhuan = createStackNavigator({
  TopDemo: {
    screen: TopDemo,
    navigationOptions: {
      header: null
    }
  },
  Detail: Detail
});

export default TiaoZhuan;

TopDemo是顶部栏，包含两个页面
RefreshListView实现上拉加载更多，下拉刷新数据：
使用之前导入依赖和yarn包：
yarn add react-native-refresh-list-view
import RefreshListView, { RefreshState } from “react-native-refresh-list-view”;

import React, { Component } from "react";
import { createTabNavigator } from "react-navigation";
import Good from "./Good";
import Ask from "./Ask";

const TopDemo = createTabNavigator({
  Good: {
    screen: Good,
    navigationOptions: {
      title: "Good"
    }
  },
  Ask: {
    screen: Ask,
    navigationOptions: {
      title: "Ask"
    }
  }
});
export default TopDemo;

这是第一个页面，第二个与第一个一样

import React, { Component } from "react";
import { View, Text, TouchableHighlight, Image } from "react-native";
import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

export default class Good extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataValue: [],
      refreshState: RefreshState.Idle,
      page: 1
    };
  }

  componentDidMount() {
    this.onHeaderRefresh();
  }
  onHeaderRefresh = () => {
    this.setState({
      refreshState: RefreshState.HeaderRefreshing,
      page: 1
    });

    fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=good&limit=10`)
      .then(request => request.json())
      .then(requestJson => {
        this.setState({
          refreshState: RefreshState.Idle,
          dataValue: requestJson.data,
          page: this.page + 1
        });
      })
      .catch(error => {
        this.setState({
          refreshState: RefreshState.Failure
        });
      });
  };

  onFootRefresh = () => {
    this.setState({
      refreshState: RefreshState.FooterRefreshing,
      page: this.state.page + 1
    });
    fetch(
      `https://cnodejs.org/api/v1/topics?page=${
        this.state.page
      }&tab=good&limit=10`
    )
      .then(request => request.json())
      .then(requestJson => {
        this.setState({
          refreshState: RefreshState.Idle,
          dataValue: [...this.state.dataValue, ...requestJson],
          page: this.state.page + 1
        });
      })
      .catch(error => {
        this.setState({
          refreshState: RefreshState.Failure
        });
      });
  };
  render() {
    return (
      <RefreshListView
        data={this.state.dataValue}
        renderItem={({ item }) => (
          <TouchableHighlight
            onPress={() => {
              this.props.navigation.navigate("Detail", {
                content: item.content
              });
            }}
          >
            <View style={{ padding: 20, flexDirection: "row" }}>
              <Image
                style={{ width: 50, height: 50, borderRadius: 50 }}
                source={{ uri: item.author.avatar_url }}
              />
              <View>
                <Text>{item.title}</Text>
                <Text>{item.last_reply_at}</Text>
              </View>
            </View>
          </TouchableHighlight>
        )}
        refreshState={this.state.refreshState}
        onFooterRefresh={this.onFootRefresh}
        onHeaderRefresh={this.onHeaderRefresh}
      />
    );
  }
}

这是要跳转的详情页面，路由是在TiaoZhuan设置过。
Html：用于加载HTML页面片段
导入依赖：yarn add react-native-render-html
import HTML from “react-native-render-html”; //渲染html成原生内容

import React, { Component } from "react";
import { View, Text, ScrollView } from "react-native";
import HTML from "react-native-render-html";

export default class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <ScrollView>
        <HTML
          style={{ padding: 10, flex: 1 }}
          html={this.props.navigation.getParam("content", "服务器报错！")}
        />
      </ScrollView>
    );
  }
}

这是总路由的第二个页面：身份认证

import React, { Component } from "react";
import { createSwitchNavigator } from "react-navigation";
import My from "./My";
import Login from "./Login";

const RenZheng = createSwitchNavigator({
  My: My,
  Login: Login
});
export default RenZheng;

首先要显示的是我的页面

import React, { Component } from "react";
import {
  View,
  Text,
  AsyncStorage,
  Button,
  TouchableHighlight,
  Image
} from "react-native";

export default class My extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      name: ""
    };
    this.isLoginAsync();
  }

  isLoginAsync = async () => {
    const names = await AsyncStorage.getItem("name");
    if (names && names.length > 0) {
      this.setState({
        isLogin: true,
        name: names
      });
    } else {
      this.setState({
        isLogin: false,
        name: ""
      });
    }
  };

  signOutAsync = async () => {
    await AsyncStorage.clear();
    this.setState({
      isLogin: false,
      name: ""
    });
  };
  render() {
    return (
      <View>
        <View>
          {this.state.isLogin ? (
            <View style={{ flexDirection: "row" }}>
              <Image
                style={{ width: 50, height: 50, borderRadius: 50 }}
                source={require("../abc.jpg")}
              />
              <Text>{this.state.name}</Text>
            </View>
          ) : (
            <TouchableHighlight
              onPress={() => {
                this.props.navigation.navigate("Login");
              }}
            >
              <Text>未登录</Text>
            </TouchableHighlight>
          )}
        </View>
        {this.state.isLogin && (
          <Button
            title="注销"
            onPress={() => {
              this.signOutAsync();
            }}
          />
        )}
      </View>
    );
  }
}

这个是登录页面

import React, { Component } from "react";
import { View, Text, Button, TextInput, AsyncStorage } from "react-native";

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      psw: ""
    };
  }
  _signInAsync = async () => {
    await AsyncStorage.setItem("name", this.state.name);
    await AsyncStorage.setItem("psw", this.state.psw);
    this.props.navigation.navigate("My");
  };
  render() {
    return (
      <View>
        <TextInput
          placeHolder="请输入账号"
          onChangeText={name => {
            this.setState({
              name
            });
          }}
        />

        <TextInput
          placeHolder="请输入密码"
          onChangeText={psw => {
            this.setState({
              psw
            });
          }}
        />

        <Button
          title="登录"
          onPress={() => {
            this._signInAsync();
          }}
        />
      </View>
    );
  }
}

猜你喜欢