1. 程式人生 > >react-navigation 報錯解決方法

react-navigation 報錯解決方法

咱也不說廢話了,別看中文文件,看英文文件吧!!!

還是來一個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
  }
})

直接拿去執行看效果吧,記住看英文文件,翻譯一下。。。