还是来一个demo吧
HomeScreen.js
import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'Home'
}
render() {
return (
<Text>HomeScreen</Text>
)
}
}
ProfileScreen.js
import React, { Component } from 'react'
import { Text, StyleSheet, View, Button } from 'react-native'
export default class ProfileScreen extends Component {
static navigationOptions = {
title: 'ProfileScreen'
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Home"
onPress={() => this.props.navigation.navigate('Home')}
/>
</View>
)
}
}
const styles = StyleSheet.create({})
App.js
import React, { Component } from 'react'
import { Platform, StyleSheet, Text, View } from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation'
import HomeScreen from './HomeScreen'
import ProfileScreen from './ProfileScreen'
const navigator = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen }
}, {
initialRouteName: "Profile"
})
const App = createAppContainer(navigator)
export default App
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
}
})