• 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
      }
    })
    

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

  • 相关阅读:
    centos7安装php7
    将centos7镜像源更新为阿里镜像源
    CentOS7 vscode连接本地虚拟机vsftp服务器
    php 查看扩展,配置文件路径命令
    centos查看程序监听的端口
    centos7搭建ftp服务
    redis-事务
    kettle 执行 kjb 临时文件夹 /tmp permission denied 问题
    Spring 声明式事务与编程式事务详解
    进程和线程的区别
  • 原文地址:https://www.cnblogs.com/yzyh/p/10111335.html
Copyright © 2020-2023  润新知