还是来一个demo吧
启动前的操作,如果是新安装那么省略第1步和第2步#####
1.remove node_modules and package-lock.json
2.npm install
3.npm install --save react-navigation
4.npm install --save react-native-gesture-handler
5.react-native link
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
}
})