react native的网络请求fetch方法来对后台进行请求的，跳页主要是通过react-navigation 来实现的。以下是一个小例子。实现一个登录请求成功后，跳转到主页到demo
需要安装到包还挺多到。大体如下:
npm install react-navigation --save
npm install react-navigation-stack
yarn add react-navigation-tabs
npm install --save @react-native-community/masked-view
npm install react-native-safe-area-context
入口：App.js
import React, {Component} from 'react';
import { StyleSheet, View, Text, Image,Dimensions,Alert,TextInput,TouchableOpacity,} from "react-native";
import AppNavigator from './page/navigator';
export default class myapp extends Component {
constructor() {
super();
}
render() {
return (
<AppNavigator/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
marginTop: 44,
fontSize: 16,
alignItems: 'center'
}
});
栈导航：navigator.js
import React from 'react';
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import LoginScreen from './login/login.js'
import MainScreen from "./main.js";
const AppNavigator = createStackNavigator({
Login: {
screen: LoginScreen,
navigationOptions: ({navigation}) => ({
headerShown:false
})
},
Main: {
screen: MainScreen,
navigationOptions: (navigation, screenProps) => ({
headerShown:false
})
}
},
{
initialRouteName: 'Login'
}
);
export default createAppContainer(AppNavigator);
tab导航：main.js
import { createStackNavigator, createAppContainer, createSwitchNavigator, } from 'react-navigation';
import { createBottomTabNavigator } from "react-navigation-tabs";
import Home from './main/HomeScreen'
import Message from './main/MessageScreen'
import Mine from './main/MyScreen'
/**
* 底部标签导航
*/
const bottomNavigator = createBottomTabNavigator(
/**
* RouteConfigs
*/
{
//路由页面1
bottomPage1: {
screen: Home,
},
//路由页面2
bottomPage2: {
screen: Message,
},
//路由页面3
bottomPage3: {
screen: Mine,
},
},
{
backBehavior: 'none',
tabBarOptions: {
showIcon: true,
activeTintColor: '#fd742f',
inactiveTintColor: '#a6a1aa',
activeBackgroundColor:'#e0dce0',
style: {backgroundColor: '#f5f4f9', height: 55}
labelStyle: {fontSize: 16},
},
});
const bottomAppContainer = createAppContainer(bottomNavigator);
export default bottomAppContainer;
登录页：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import { StyleSheet, View, Text, Image,Dimensions,Alert,TextInput,TouchableOpacity,KeyboardAvoidingView} from "react-native";
import HttpUtil from '../util/HttpUtil.js';
// Dimensions 用于获取设备宽、高、分辨率
const { width, height } = Dimensions.get("window");
export default class LonginScreen extends Component {
static navigationOptions = {
}
constructor() {
super();
}
render() {
return (
<View style={styles.container}>
<View style={
{marginTop: 80,alignItems: 'center'}}>
<Image style={styles.logo} source={require('../image/login_Icon.png')} />
<Text style={
{fontSize:20,color:'#555fff',marginTop: 10,}}>护林通</Text>
</View>
<View style={
{alignItems: 'center',marginTop: 30}}>
<View style={
{flexDirection:'row',alignItems: 'center',borderBottomWidth: 1,height: 64,justifyContent: 'center',}}>
<Image style={
{width: 64,height: 64,}} source={require('../image/user_icon.png')} />
<TextInput style={
{width: 300,fontSize:20}} placeholder="请输入用户"/>
</View>
<View style={
{flexDirection:'row',alignItems: 'center',borderBottomWidth: 1,height: 64,justifyContent: 'center',marginTop: 30,}}>
<Image style={
{width: 64,height: 64,}} source={require('../image/ic_lock.png')} />
<TextInput style={
{width: 300,fontSize:20}} placeholder="请输入密码"/>
</View>
</View>
<TouchableOpacity style={styles.login} onPress={()=>this.post()}>
<Text style={
{color:'#ffffff'}}>登录</Text>
</TouchableOpacity>
</View>
);
}
post() {
var data = {username: 'ayuhani', password: '123456'}
HttpUtil.post('http://192.168.0.101:8083//home/login.do', data)
.then(result => {
console.log(result);
if(result.success){
this.props.navigation.navigate('Main');
}
})
.catch(error => console.error(error))
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
marginTop: 44,
fontSize: 16,
alignItems: 'center'
},
logo:{
width: 64,
height: 64
},
login:{
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#aaa000',
width: 300,
height: 44,
borderRadius: 10,
}
});