zoukankan      html  css  js  c++  java
  • 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
      }
    })
    

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

  • 相关阅读:
    docker--docker介绍
    docker--虚拟化
    高级运维工程师的打怪升级之路
    mysql常用函数
    CentOS 7 下使用 Firewall
    51nod 1094 和为k的连续区间(map+前缀和)
    51nod 1092 回文字符串(dp)
    51nod 1062 序列中最大的数(打表预处理)
    51nod 1284 2 3 5 7的倍数(容斥原理+反面思考)
    51nod 1347 旋转字符串(思维好题)
  • 原文地址:https://www.cnblogs.com/yzyh/p/10111335.html
Copyright © 2011-2022 走看看