首页
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import ChatScreen from './ChatScreen';
class App extends Component<{}> {
static navigationOptions = {
title: 'Welcome',//设置标题内容
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {
this.props.navigation.navigate('Chat',{user:'Lucy'});
}}>
<Text style={styles.welcome}>
首页
</Text>
</TouchableOpacity>
</View>
);
}
}
const SimpleApp = StackNavigator({
Home: {screen: App},
Chat:{screen:ChatScreen},
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export default SimpleApp;
跳转页
'use strict'
import React,{Component} from 'react';
import {View,Text} from 'react-native';
class ChatScreen extends Component{
static navigationOptions = {
title:'Chat with Lucy',
};
render(){
const {params} = this.props.navigation.state;
return(
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
export default ChatScreen;
