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;
View Code
【路由Home.js⽂件】
react router 动态路由import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
class Home extends Component {
render() {
return (
<View style={ainer}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
</View>
);
}
}
const styles = ate({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
}
});
export default Home;
View Code
【路由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 = Item("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={ainer}>
<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 = ate({
container: {
flex: 1,
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10
}
});
const MyRoute = createSwitchNavigator({
My: My,
Login: Login
});
export default MyRoute;
View Code
【路由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={ainer}>
<ScrollView>
<HTML
style={styles.welcome}
html={this.Param("content", "content")}              />
</ScrollView>
</View>
);
}
}
const styles = ate({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
flex: 1
}
});
export default withNavigation(Details);
View Code
【路由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() {
}
//下拉刷新
onHeaderRefresh = () => {
//设置为正在下拉刷新的状态
this.setState({ page: 1, refreshState: RefreshState.HeaderRefreshing });    fetch(`/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(
`/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={ainer}>
{/* //刷新控件的使⽤ */}
<RefreshListView
style={{ flex: 1 }}
data={this.state.dataValue}