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】