場景:首頁有兩個鏈接,分別跳轉到登錄頁面和注冊頁面。
登錄頁面也有一個鏈接跳轉到注冊頁面,注冊頁面也有一個鏈接跳轉到登錄頁面。
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;