美文网首页
react-navigation 第三方库安装

react-navigation 第三方库安装

作者: Th丶小伟 | 来源:发表于2019-04-23 09:24 被阅读0次

    由于react-navigation更新比较快 。本文写于2019-4-23
    昨天弄了一整天的坑。网上资料过时造成的。
    主要出现的BUD 输出:
    npm install react-navigation --save 之后项目运行不了

    import { StackNavigator} from "react-navigation"; 之后项目出错

    Module AppRegistry is not a registered callable module 启动目录不对等等。
    最后还是去官方看英文文档才发现已经改了方式。
    react-navigation 官方英文

    这个教训让我以后出问题最好是去官网看之后再百度&Google

    cd 到项目目录之后 依次执行命令:
    yarn add react-navigation
    yarn add react-native-gesture-handler
    链接所有本机依赖项:
    react-native link react-native-gesture-handler

    index.js不需要改动  在APP.js里面加入以下代码
    
    import React from 'react';
    import { View, Text, Button } from 'react-native';
    import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
    import HelloWorld from "./跳转类/HelloWorld";  
    
    class HomeScreen extends React.Component {
      static navigationOptions = {
        title: '首页'
      }
      render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
              <Text>Home Screen</Text>
              <Button
                  title="Go to Details"
                  // onPress={() => this.props.navigation.push('WelCome')}
                  onPress={() => this.props.navigation.navigate('WelCome')}
    
                
    
    
              />
            </View>
        );
      }
    }
    
    const AppNavigator = createStackNavigator({
      Home: {
        screen: HomeScreen,
      }, 
      WelCome: {
        screen: HelloWorld,
      },
    });
    
    export default createAppContainer(AppNavigator);
    

    跳转函数和集成命令都有改动。
    end

    相关文章

      网友评论

          本文标题:react-navigation 第三方库安装

          本文链接:https://www.haomeiwen.com/subject/kkjmgqtx.html