[英]React Native Navigating Between Two Screens
在React Native中,我需要从一个屏幕导航到另一个屏幕。 但是我不理解这个概念,所以我做了如下
在App.js中
import React, {Component} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {StyleSheet, Text, Alert, View} from 'react-native';
import { Container, Header, Content, Button} from 'native-base';
import { createStackNavigator, createAppContainer } from 'react-navigation';
type Props = {};
export default class App extends Component<Props> {
ShowAlertDialog = () =>{
Alert.alert(
// This is Alert Dialog Title
'Lopels',
// This is Alert Dialog Message.
'Welcome to Lopels',
[
// First Text Button in Alert Dialog.
{text: 'Ask me later', onPress: () => console.log('Ask me later Button Clicked')},
// Second Cancel Button in Alert Dialog.
{text: 'Cancel', onPress: () => console.log('Cancel Button Pressed'), style: 'cancel'},
// Third OK Button in Alert Dialog
{text: 'OK', onPress: () => console.log('OK ButtonPressed')},
]
)
}
render() {
return (
<Container>
<LinearGradient colors={['#007991', '#78ffd6']} style={styles.linearGradient}>
<Text style={styles.logoText}>
Lopels
</Text>
<Text style={styles.tagText}>
The Complete Loyalty Platform
</Text>
<Button style={styles.button} onPress={this.ShowAlertDialog}>
<Text style={styles.buttonText}>Get Started</Text>
</Button>
</LinearGradient>
</Container>
);
}
}
const styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 5,
paddingRight: 5,
},
logoText: {
fontSize: 50,
fontFamily: 'Graceland',
textAlign: 'center',
marginTop: 170,
color: '#ffffff',
backgroundColor: 'transparent',
},
tagText:{
fontSize:15,
letterSpacing: 3,
fontFamily:'Actor',
textAlign: 'center',
color: 'black',
backgroundColor: 'transparent',
},
button:{
marginLeft: '15%',
marginTop: '8%',
width:250,
borderRadius: 10,
backgroundColor:'#ffffff',
borderColor: "transparent",
},
buttonText:{
marginTop: '8%',
marginLeft: '35%',
fontFamily: 'Actor',
color: '#282828',
fontSize: 18,
}
});
文件夹其他屏幕位于文件夹./src/Login Screen / index.js中
单击App.js的“入门”按钮后,我需要导航到“登录屏幕”
该应用程序的条目是App.js,它已导入index.ios.js
index.ios.js
import React, { Component } from 'react';
import {
AppRegistry
} from 'react-native';
import App from './component/stackScreens/App';
AppRegistry.registerComponent('reactNav', () => App);
在App.js中,将导入StackNavigator。 App.js是一个堆栈,其中包含导航所需的所有组件。
App.js
import React from 'react';
import { StackNavigator } from 'react-navigation';
import ScreenOne from './ScreenOne';
import ScreenTwo from './ScreenTwo';
import ScreenThree from './ScreenThree';
const App = StackNavigator({
ScreenOne: { screen: ScreenOne},
ScreenTwo: { screen: ScreenTwo},
ScreenThree: {screen: ScreenThree}
})
export default App;
ScreenOne.js
class ScreenOne extends Component {
render() {
const { navigate } = this.props.navigation
return (
<View style={styles.container}>
<TouchableHighlight
onPress={() => navigate("ScreenTwo")}
style={styles.button}>
<Text
style={styles.buttonText}>Screen One </Text>
</TouchableHighlight>
</View>
);
}
};
const {navigation} = this.props.navigation:指定要导航的屏幕。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.