App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React, { Component } from 'react' import { Platform, StyleSheet, Text, View } from 'react-native' import { createStackNavigator, createAppContainer } from 'react-navigation' import HomeScreen from './pages/HomeScreen' import ProfileScreen from './pages/ProfileScreen.js' const navigator = createStackNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen } }) 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 } }) |
pages/ProfileScreen
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import React, { Component } from 'react' import { Text, StyleSheet, View } from 'react-native' export default class ProfileScreen extends Component { static navigationOptions = { title: 'ProfileScreen' } render() { return ( <View> <Text> 2 </Text> </View> ) } } const styles = StyleSheet.create({}) |
pages/HomeScreen
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, { Component } from 'react' import { Text, StyleSheet, View, Button } from 'react-native' import { createStackNavigator, createAppContainer } from 'react-navigation'; export default class HomeScreen extends Component { static navigationOptions = { title: 'HomeScreen' } render() { return ( <View> <Text> one </Text> <Button title="go to two" onPress={() => this.props.navigation.navigate('Profile')} /> </View> ) } } const styles = StyleSheet.create({}) |
然后报错：
undefined is not an object (evaluating ‘RNGestureHandlerModule.State’
解决办法：
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link
参考：