场景:首页有两个链接,分别跳转到登录页面和注册页面。
登录页面也有一个链接跳转到注册页面,注册页面也有一个链接跳转到登录页面。
android.index.js 代码
/**
* Sample React Native App
* http://uminicmf.com
* auth:duerhong
* email:1186969412 qq:1186969412
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Home from './Auth';
export default class dudu extends Component {
render() {
return (
<Home />
);
}
}
AppRegistry.registerComponent('dudu', () => dudu);
Auth.js 首页代码实现
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Button,
ToastAndroid,
} from 'react-native';
import {TabNavigator,StackNavigator} from 'react-navigation';
import LoginScreen from './app/Login';
import RegisterScreen from './app/Register';
class SignIn extends Component {
_getpen(){
this.props.navigation.goBack();
}
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>首页</Text>
<Button
title="去登录"
onPress={() =>navigate('Login', { name: 'Jane' })}
/>
<Button
title="去注册"
onPress={() =>navigate('Register', { name: 'Jane' })}
/>
</View>
);
}
}
const App = StackNavigator({
Home: {
screen: SignIn,
navigationOptions: {
header: null // 无标题栏
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null // 无标题栏
}
},
Register: {
screen: RegisterScreen,
hnavigationOptions: {
header: null // 无标题栏
}
},
});
module.exports = App;
login.js 代码实现
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native';
import {TabNavigator,StackNavigator} from 'react-navigation';
import RegisterScreen from './Register';
// import AuthScreen from './Auth';
class LoginScreen extends Component {
_getpen(){
this.props.navigation.goBack();
}
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>登录页面</Text>
<Button
title="返回首页"
onPress={() =>navigate('Home', { name: 'Jane' })}
/>
<Button
title="去注册"
onPress={() =>navigate('Register', { name: 'Jane' })}
/>
</View>
);
};
}
const Apps = StackNavigator({
Logins: {
screen: LoginScreen,
navigationOptions: {
header: null // 无标题栏
}
},
});
module.exports=Apps;
register.js代码实现
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
Button,
} from 'react-native';
class RegisterScreen extends Component {
render() {
return (
<View>
<Text>注册页面</Text>
</View>
);
};
}
module.exports=RegisterScreen;