react-navigation 报错解决方法

咱也不说废话了，别看中文文档，看英文文档吧！！！

还是来一个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
  }
})

直接拿去运行看效果吧，记住看英文文档，翻译一下。。。

转载于:https://www.cnblogs.com/yzyh/p/10111335.html