RN路由代码实例

【路由Router.js】

import {
    createBottomTabNavigator,
    createTabNavigator,
    createStackNavigator
  } from "react-navigation";
  import React, { Component } from "react";
  import Ionicons from "react-native-vector-icons/Ionicons";
  import Home from "./Home";
  import My from "./My";
  import Good from "./Good";
  import Details from "../page/Details";
  import Share from "./Share";
  
  const MainNews = createTabNavigator({
    Tab1: Good,
    Tab2: Share,
    Tab3: Good,
    Tab4: Share
  });
  
  const Route = createBottomTabNavigator(
    {
      Home: {
        screen: Home,
        navigationOptions: {
          title: "首页"
        }
      },
      News: {
        screen: MainNews,
        navigationOptions: {
          title: "消息"
        }
      },
      My: {
        screen: My,
        navigationOptions: {
          title: "我的"
        }
      }
    },
    {
      //配置底部导航图片
      navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
          const { routeName } = navigation.state;
          let iconName;
          if (routeName === "Home") {
            iconName = "ios-document";
          } else if (routeName === "News") {
            iconName = "ios-create";
          } else if (routeName === "My") {
            iconName = "ios-create";
          }
  
          return <Ionicons name={iconName} size={25} color={tintColor} />;
        }
      })
    }
  );
  
  const RApp = createStackNavigator({
    Route: {
      screen: Route,
      navigationOptions: {
        header: null
      }
    },
    Details: Details
  });
  
  export default RApp;
  

【路由Home.js文件】

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

class Home extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

export default Home;

【路由My.js文件】

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  Button,
  AsyncStorage
} from "react-native";
import { createSwitchNavigator } from "react-navigation";
import Login from "./Login";

class My extends Component {
  constructor(props) {
    super(props);

    //用户状态判断：默认为false未登录
    this.state = {
      userToken: false, //用户判断是否登录
      username: "" //用户获取用户登录后的用户信息
    };
  }

  componentDidMount() {
    this._bootstrapAsync();
  }

  //获取用户状态
  _bootstrapAsync = async () => {
    const name = await AsyncStorage.getItem("userToken"); //获取SP中保存的信息

    //判断用户状态转换为userToken变量
    if (name && name.length > 0) {
      this.setState({
        userToken: true,
        username: name
      });
    } else {
      this.setState({
        userToken: false,
        username: ""
      });
    }
  };

  //注销
  _signOutAsync = async () => {
    await AsyncStorage.clear(); //情况SP中保存的信息

    //将状态还原为false未登录
    this.setState({
      userToken: false,
      username: ""
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native My!</Text>
        <View
          style={{
            height: 200,
            width: "100%",
            backgroundColor: "#FF0000",
            flexDirection: "row",
            alignItems: "center"
          }}
        >
          <Image
            style={{
              width: 60,
              height: 60,
              borderRadius: 65
            }}
            source={require("./img/d4.png")}
          />
          {//根据用户状态，判断是否要显示用户名和未登录按钮   （已登录：显示用户名称，未登录：显示未登录按钮）

          this.state.userToken ? (
            <Text style={{ fontSize: 18 }}>
              {
                this.state.username //动态显示用户登录信息
              }
            </Text>
          ) : (
            <TouchableHighlight
              onPress={() => {
                //调用跳转登录页面
                this.props.navigation.navigate("Login");
              }}
            >
              <Text style={{ fontSize: 18 }}>未登录</Text>
            </TouchableHighlight>
          )}
        </View>
        <View
          style={{
            height: 50,
            width: "100%",
            backgroundColor: "#00FF00",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
            marginTop: 10
          }}
        >
          <Text style={{ fontSize: 18 }}>记录</Text>
          <Text style={{ fontSize: 18 }}>{">"}</Text>
        </View>
        <View
          style={{
            height: 50,
            width: "100%",
            backgroundColor: "#00FF00",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
            marginTop: 10,
            marginBottom: 10
          }}
        >
          <Text style={{ fontSize: 18 }}>账单</Text>
          <Text style={{ fontSize: 18 }}>{">"}</Text>
        </View>

        {//根据用户状态，判断是否要显示注销按钮   （一登录：显示，未登录：不显示）
        this.state.userToken && (
          <Button
            title="注销"
            onPress={() => {
              //调用注销方法
              this._signOutAsync();
            }}
          />
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

const MyRoute = createSwitchNavigator({
  My: My,
  Login: Login
});

export default MyRoute;

【路由Details.js文件】

import React, { Component } from "react";
    import { StyleSheet, ScrollView, View, WebView } from "react-native";
    import HTML from "react-native-render-html";
    import { withNavigation } from "react-navigation";
    
    class Details extends Component {
      render() {
        return (
          <View style={styles.container}>
            <ScrollView>
              <HTML
                style={styles.welcome}
                html={this.props.navigation.getParam("content", "content")}
              />
            </ScrollView>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF"
      },
      welcome: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
        flex: 1
      }
    });
    export default withNavigation(Details);
    

【路由Share.js文件】

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

class Share extends Component {
  constructor(props) {
    super(props);

    /**
     *page： 当前页面值
      refreshState： 刷新状态
      dataValue： 数据源
     */
    this.state = {
      page: 1,
      refreshState: RefreshState.Idle,
      dataValue: []
    };
  }

  /**
   * 生命周期方法，创建的时候调用下拉刷新，加载数据
   */
  componentDidMount() {
    this.onHeaderRefresh();
  }

  //下拉刷新
  onHeaderRefresh = () => {
    //设置为正在下拉刷新的状态
    this.setState({ page: 1, refreshState: RefreshState.HeaderRefreshing });

    fetch(`https://cnodejs.org/api/v1/topics?page=1&tab=share&limit=10`)
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          //显示获取到的数据
          dataValue: responseJson.data,
          refreshState: RefreshState.Idle,
          page: this.state.page + 1
        });
      })
      .catch(error => {
        this.setState({
          refreshState: RefreshState.Failure
        });
      });
  };
  //上拉加载
  onFooterRefresh = () => {
    //设置为正在上拉加载的状态
    this.setState({ refreshState: RefreshState.FooterRefreshing });

    fetch(
      `https://cnodejs.org/api/v1/topics?page=${
        this.state.page
      }&tab=share&limit=10`
    )
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          //将加载到的数据与原数据进行拼接
          dataValue: [...this.state.dataValue, ...responseJson.data],
          refreshState: RefreshState.Idle,
          page: this.state.page + 1
        });
      })
      .catch(error => {
        this.setState({
          refreshState: RefreshState.Failure
        });
      });
  };

  render() {
    return (
      <View style={styles.container}>
        {/* //刷新控件的使用 */}
        <RefreshListView
          style={{ flex: 1 }}
          data={this.state.dataValue}
          keyExtractor={(item, index) => index}
          renderItem={({ item }) => (
            <TouchableHighlight
              onPress={() => {
                this.props.navigation.navigate("Details", {
                  content: item.content
                });
              }}
            >
              <View style={{ flexDirection: "row", margin: 5 }}>
                <Image
                  source={{ uri: item.author.avatar_url }}
                  style={{ width: 80, height: 80, borderRadius: 65 }}
                />
                <View>
                  <Text>{item.title}</Text>
                  <Text>{item.author.loginname}</Text>
                </View>
              </View>
            </TouchableHighlight>
          )}
          //多出方法：设置刷新状态，设置下拉刷新，设置上拉加载更多
          refreshState={this.state.refreshState}
          onHeaderRefresh={this.onHeaderRefresh}
          onFooterRefresh={this.onFooterRefresh}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

export default Share;

【要用到的图片img/d4.png】