react-navigation 報錯解決方法
阿新 • • 發佈:2018-12-12
還是來一個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 } })